modern website development
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](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/1.jpg)
Modern Web Site Development
Erick BeckDivision of Marketing & Communications
![Page 2: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/2.jpg)
Agenda
• Defining Success• Content Organization• Putting it into Practice• Best Practices & Common Elements• Q&A
![Page 3: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/3.jpg)
Defining Success
![Page 4: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/4.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/5.jpg)
The first commercial website didn’t exist until August 1993.
Source: oreilly.com
![Page 6: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/6.jpg)
Source: wired.com
The first banner add followed the next year.
![Page 7: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/7.jpg)
The first Texas A&M site wasn’t online until 1997.
Source: tamu.edu
![Page 8: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/8.jpg)
Source: cbs.com
Radio to Television
![Page 9: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/9.jpg)
Source: clydi.com
Print to Web
![Page 10: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/10.jpg)
Do people “browse the web” anymore?
Source: tamu.edu
![Page 11: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/11.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/12.jpg)
Content Organizationor,
So how do we do this?
![Page 13: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/13.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/14.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/15.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/16.jpg)
Source: XKCD.com
![Page 17: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/17.jpg)
Putting it into Practice
![Page 18: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/18.jpg)
![Page 19: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/19.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/20.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/21.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/22.jpg)
Source: useit.com
![Page 23: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/23.jpg)
• 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](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/24.jpg)
Best Practices & Common Elements
![Page 25: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/25.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/26.jpg)
Source: getsocialbrevard.org
Social Media
![Page 27: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/27.jpg)
Social Media
Source: socialsteve.wordpres.com
![Page 28: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/28.jpg)
Social Media
![Page 29: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/29.jpg)
Social Media
![Page 30: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/30.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/31.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/32.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/33.jpg)
Branding
• Approved Logos• Brand Colors• Typography• Site elements
![Page 34: Modern Website Development](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/34.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/35.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/36.jpg)
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](https://reader038.vdocuments.us/reader038/viewer/2022110115/54c37d374a7959dc288b458c/html5/thumbnails/37.jpg)
Q&A