Recommended
More Related Content
Similar to Modern Website Development
Similar to Modern Website Development (20)
More from tamuwww
More from tamuwww (10)
Recently uploaded
Recently uploaded (20)
Modern Website Development
- 1. Modern Web Site Development Erick Beck Division of Marketing & Communications
- 2. Agenda • Defining Success • Content Organization • Putting it into Practice • Best Practices & Common Elements • Q&A
- 4. The world’s first web page consisted of nothing but text and links. Graphics were not available. Source: newscientist.com
- 5. The first commercial website didn’t exist until August 1993. Source: oreilly.com
- 6. Source: wired.com The first banner add followed the next year.
- 7. The first Texas A&M site wasn’t online until 1997. Source: tamu.edu
- 8. Source: cbs.com Radio to Television
- 9. Source: clydi.com Print to Web
- 10. Do people “browse the web” anymore? Source: tamu.edu
- 11. 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.
- 12. Content Organization or, So how do we do this?
- 13. 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
- 14. 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
- 15. 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.
- 16. Source: XKCD.com
- 17. Putting it into Practice
- 19. 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.
- 20. 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
- 21. 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
- 23. • 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
- 24. Best Practices & Common Elements
- 25. 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
- 28. Social Media
- 29. Social Media
- 30. 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?
- 31. Accessibility 1. It is the right thing to do 2. 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?
- 32. 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?
- 33. Branding • Approved Logos • Brand Colors • Typography • Site elements
- 34. 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
- 35. 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)
- 36. Resources We invite you to participate in the campus web development community: • University Webmaster’s Blog http://webmaster.tamu.edu • uWeb mailing list uweb@listserv.tamu.edu
- 37. Q&A
Editor's Notes
- Welcome. Intro self I have been asked to talk with you about what goes into building a good website. Books have been written on this topic but I will try to be a little more brief.
- Let’s first take a look back…
- Why did we go back to look at this history? In part to remind you that the internet as we know it is still only 20 years old. It is amazing to think it is so young when we look at everything that we have access to today. In spite of the overwhelming amount of content, we are still dealing with a relatively young medium. And our understanding of how to develop for it is equally young and in immature. Consider as a comparison the growth of television…
- Television in America became widespread in the 1950s. By that time we had been listening to radio programs for decades. More to the point, producers had been formatting programming for the radio medium for decades. They knew what worked. When television came along they did what was natural…they applied the rules they knew from ratio to television. Thus we had the “talking heads”… news anchors would read the news just like they would on radio, the only difference was that the camera was on them. Fast forward to today… the television medium is mature. Producers know how to splice in video of the actual news story instead of keeping the camera focused on the anchor.
- The transformation from print to web is following exactly the same path. In the early days of the internet we simply thought of web pages as an online version of our printed content. It is only recently that we have begun to push the boundaries and build web sites specifically designed for the web medium rather than simply applying the rules that we learned for print. We are in internet terms about where the television industry was in 1970. We have a long ways to go before we can take full advantage of the web. We need to continually push ourselves rather than falling back on the same ways of doing things.
- We all know that the nature of the web is ever changing. This can be seen in the very technology that we use. We used to literally browse the web, going from one site to another to stumble on content. We no longer do that. Recognize that the speed at which the status quo changes means that we need to be forward-looking toward new methodologies rather than remaining mired in today’s or yesterday’s.
- This is also the reason that search engines have become so important. Half of an average web site’s traffic comes from search engines. This is because people go there to look for content instead of browsing sites. So the question becomes… how do we do this?
- In spite of what I have just said about the web being a separate medium and that the old rules don’t apply, the basic principles of communication never go out of style. They remain the same on the web as in print and on everything since you were first taught to write in high school English class. First, have a stated reason for building a website in the first place.
- Identifying your audience is crucial to having a focused web site. If you don’t keep your audience in mind the sheer amount of content that you have will cause you to create a less cohesive site that will be bloated and difficult for your users to find what they want. Sometimes this is unpopular. On www.tamu.edu the most popular link on the site was for email. Students/faculty/staff would to go www and link to their campus email instead of typing it in. In our last redesign we specifically identified potential students and parents as our primary audience. They had no use for the email link, so we took it off. People on campus complained, then got used to it. In the end the university site was better for it. Removing the link allowed for more real estate for other content that our audience was interested in. We have had many comments from parents complimenting how easy it is to find what they want.
- The creation of content should be the longest and most involved part of a web development project. It is the most important part of the site. Content should drive all design and development choices. It is too easy to start a project with a design and tailor your content to that design. Start with content instead and tailor your design to the content. Don’t be afraid to look at your competitors for ideas during your research.
- So let’s assume that you have done all that work and have the content that you want. How do we put that into a well developed web page so that it provides a benefit for our users?
- This is a book – a great book. Go get it and read it. It is written to be easy to follow and is much more eloquent that I can ever be. It is also, though, a philosophy. As you write every page on your site, and every section of every page, the meaning should be obvious and self-explanatory. If your content isn’t simple and to the point it isn’t effective. If it isn’t effective, if you make the user think, you have failed to meet your primary objective.
- Depts get hung up on both of these, but you have to be firm in advocating for your user. Supplemental Instruction vs. tutoring
- In general, we are not providing users with what they are expecting.
- As a good comparison, think about this presentation if I wrote these slides in paragraph format. How you organize the content on the page also matters…
- Research has shown that users not only scan pages, but scan them in a predicatable pattern. Generally known as F-Shaped pattern. Recognize this behavior and stack your most important content in areas that are heavily read.
- For example - www.tamu.edu has calendar and tamutimes Virtual tours has calendar plus aggie maps plus foursquare Make your properties support and strengthen one another. Common data feed for all = consistent content that only has to be updated once
- Part of adapting to the future of the web is to incorporate social media into your sites. Traditional way of using social media follows the standard funnel. Social media drives awareness of your brand, which filters into loyalty, which filters into action on your web site. This could be enrolling to the university, buying a product, or just getting a bit of information.
- The one piece missing from the traditional funnel is an arrow that takes users from your content at the bottom back up to the top. Social media can act as an amplifier, increasing the reach of our pages to audiences we never would have been able to reach otherwise.
- That is why we put, and recommend that everyone put, share icons on their sites where appropriate. News articles and photos are a good start. Pick a package that offers analytics. We use addThis.com and it shows us the amount of viral lift that we get from people clicking back to our article from a facebook or twitter post that somebody had shared. Just adding these links has doubled the traffic that our news stories have been getting.
- Also, incorporate social media into your pages where it is appropriate. We have Foursquare on virtual tours, and will be incorporating likes and pins of photos there as well. The key is to make sure the content makes sense, don’t put it in just for the sake of having it.
- Branding sets the way others see us. It defines our Aggie personality and shapes the way others perceive us. Cohesive use of colors, logos, and site elements help create a cohesive web site. One of common complaints that outside users have is the complete lack of focus that comes from every department having their own look and feel…particularly if it is completely unrelated to the core university brand.
- We started this presentation by noting the speed at which the internet, and therefore web development, is changing. One of these changes is the adoption of mobile devices to view web sites.