• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
2001: A Web Odyssey
 

2001: A Web Odyssey

on

  • 461 views

Remember FrontPage Extensions? How about spacer GIFS? Which font did your site use … Arial or Times? Do you remember testing to make sure your table layout looked right in Netscape? Those were the ...

Remember FrontPage Extensions? How about spacer GIFS? Which font did your site use … Arial or Times? Do you remember testing to make sure your table layout looked right in Netscape? Those were the days of animated GIFS. Since then, best practices in web design have come a long way.
Are you concerned that your knowledge of what is in or out on the web may be dated? Join Sarah Eva Monroe, a senior creative director at mStoner, and Rachel Hoormann, executive director of university web communications, for a conversation on the ways in which changes in content creation, audience expectations, governance, and analytics have radically altered the landscape of higher ed websites. Sarah Eva’s first official job as a web professional was at Tulane University in 2001. In this webinar, she will reconnect with two of her colleagues and draw upon their wisdom gained from managing the same website for more than a decade.
What You’ll Learn:
We’ll take a look at what used to be considered best practice in web management and contrast that with current thinking. You’ll come to understand which techniques should be retired, and which have remained in vogue. We’ll explore the following questions:
How is mobile browsing like using dial-up?
Do I still need to choose web-safe colors?
Which image formats are best for which types of graphics?
How has communication strategy evolved?
What is the evolution of the online news room?
What is distributed content management?
Can I really only choose from a few limited typefaces when choosing a font?
Is animation in or out?
How has writing for the web changed?

Presenters:
Sarah Eva brings more than 10 years of digital creative and strategy experience to mStoner. Her career in higher education spans three institutions: The Chicago School of Professional Psychology, Columbia College Chicago, and Tulane University. At these institutions she’s held a variety of positions including web designer, art director, and digital marketing lead, and has a track record of exceeding recruitment, marketing, and advancement goals. In 2011, she joined Lipman Hearne, where she led digital/social media strategy for clients.Sarah Eva is an alumna of Obama’s 2012 digital team, where as a senior advertising strategist she managed the copywriting, design, and production of creative assets for mobile, social, desktop, and gaming platforms.
Rachel Hoormann has led web content and design strategy at Tulane University for over 13 years. She and her staff manage top-level pages, Tulane’s content management system and support all manner of electronic communications from social media to powerpoint.

Statistics

Views

Total Views
461
Views on SlideShare
461
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    2001: A Web Odyssey 2001: A Web Odyssey Presentation Transcript

    • m Thursday, November 21, 13
    • 2001: A Web Odyssey m Thursday, November 21, 13
    • Your Sarah Senior Creative Director, mStoner Rachel Executi m Thursday, November 21, 13
    • About mStoner • Twelve years of web-first branding and marketing for institutions. • Exceptional results with clients that include Harvard University, Yale University School of Law, University of Miami, Columbia University, College of William & Mary, and Fordham University. • Proven track record building visitor-centered sites that incorporate social media and multimedia, provide a platform for other communications, and move people to action. • Commitment to sharing knowledge and advancing the higher ed community through EDUniverse and HigherEdLive. • A new book on social media in education released in February 2013. m Thursday, November 21, 13
    • What We’ll Cover The internet in 2001 The internet in 2013 What’s Changed? • User expectations and user behavior Current Best Practices • User interfaces and design • Content strategy Questions Thursday, November 21, 13 m
    • Getting online used to be a big deal. m Thursday, November 21, 13
    • In 2001… Web design was limited. m Thursday, November 21, 13
    • Limited by tools m Thursday, November 21, 13
    • Display Resolution • The display resolution is the number of distinct pixels in each dimension that can be displayed. m Thursday, November 21, 13
    • Display Resolution • In 2001, the most common resolution was 800x600 or below. • Pixels were visible • Hard on the eyes m Thursday, November 21, 13
    • Screen Resolutions m Thursday, November 21, 13
    • Colors • Limitations of graphics cards and the bandwidth needed to show more than 256 colors • More colors were available, but best practices still suggested to ensure that your colors were “web-safe” m http://www.jegsworks.com/lessons/web/html/step-pagecolors.htm Thursday, November 21, 13
    • Colors m Thursday, November 21, 13
    • Even Pantone was limited m Thursday, November 21, 13
    • Do I still need to choose web-safe colors? Nope! m Thursday, November 21, 13
    • Browsers m Thursday, November 21, 13
    • Browsers m http://www.w3schools.com/browsers/browsers_stats.asp Thursday, November 21, 13
    • Browsers • Rendering engine: a software component that takes marked up content (such as HTML, XML, image files, etc.) and formatting information (such as CSS, XSL, etc.) and displays the formatted content on the screen. • A big part of content display limitations are due to the browser and its rendering engine • Rendering gets complex, but all we need to know is that the browser dictates how a web page displays. Thursday, November 21, 13 m
    • Responsiven Nielsen reports that the home pages of the most popular sites he studied took an average of 8 seconds to download, whereas the pages of the less popular sites took an average of 19 seconds to download. He therefore concludes that users will be annoyed or frustrated by pages that take any longer than about 10 seconds to load. -2001 Thursday, November 21, 13 m
    • Responsiven 10 seconds m Thursday, November 21, 13
    • Despite limitations…the internet changed daily life m Thursday, November 21, 13
    • Adoption rates m Thursday, November 21, 13
    • What did it look like? http://www.jegsworks.com/lessons/web/index.html http://www.usabilityviews.com/uv000173.html m Thursday, November 21, 13
    • Tulane.edu, 2001 • Text as graphics • Very small footprint • Text-only site • click required to access search m Thursday, November 21, 13
    • ESPN, 2001 • Busy • Traditional footer • Left navigation • New content at the top • Underlined links m Thursday, November 21, 13
    • Animated GIF NBC,2001 • Small (700px wide) • Minimal content • Top navigation • Fresh content m Thursday, November 21, 13
    • Wal-Mart, 2001 • Three column layout • Left navigation • Promotional categories • m Thursday, November 21, 13
    • Microsoft, 2001 • Text-only option • Lots of navigation • Last updated • Full screen width (right side of top nav slides) • Appearance of the feature area Thursday, November 21, 13 m
    • Fast forward to 2013 m Thursday, November 21, 13
    • The internet changed daily life: 2013 For the first time in history, a president has had to stand in the Rose Garden to apologize for a broken Web site. -NY Times m Thursday, November 21, 13
    • Tulane.edu Today • Audience-centric • Socially-integrated • High-bandwidth video content m Thursday, November 21, 13
    • ESPN, then • Busy • Traditional footer • Left navigation • New content at the top • Underlined, blue links m Thursday, November 21, 13
    • ESPN, now • Still pretty busy • More complex nav • New content throughout the page • Refined use of large photos and design elements Thursday, November 21, 13 m
    • NBC Animated GIF • Small (700px wide) • Minimal content • Top navigation • Fresh content m Thursday, November 21, 13
    • NBC today Flash ads Animated GIF • Large (960px wide) • Heavy use of imagery • Streamlined navigation • Nearly all content is heavy video Thursday, November 21, 13 m
    • Wal-Mart, 2001 • Three column layout • Left navigation • Promotional categories m Thursday, November 21, 13
    • Wal-Mart • Mega-menus • Heavier imagery, still busy • Still organized by promotional category m Thursday, November 21, 13
    • Microsoft • Mega menus • Streamlined navigation • No last updated text • Full screen width • Well-done feature area m Thursday, November 21, 13
    • User expectations -“smartness” -speed -content m Thursday, November 21, 13
    • Expectations of “smartness” m Thursday, November 21, 13
    • Speed: How is mobile browsing like using dial-up? m Thursday, November 21, 13
    • Responsiven “Response times are as relevant as ever. That's because responsiveness is a basic user interface design rule that's dictated by human needs, not by individual technologies.” m http://www.nngroup.com/articles/website-response-times/ Thursday, November 21, 13
    • Mobile = Dial-up • Low bandwidth optimization is still an issue for users accessing sites via data (3g, LTE, etc.) • Like dial-up, connections via mobile data may be inconsistent • Users are willing to wait, but patience is now in shorter supply m Thursday, November 21, 13
    • Responsiven “Page response times in the first days after the U.S. Department of Health and Human Services launched the site Oct. 1 were around eight seconds, an “unacceptable” performance. The current page response times are now less than one second—or “1,000 milliseconds,” as Zients described it—but the team working on that issue still has a “lot to do there.” m http://www.pcworld.com/article/2060400/healthcaregov-team-improves-site-response-times.html Thursday, November 21, 13
    • Responsiven “Ultimately performance is about respect. Respect your users’ time and they will be more likely to walk away with a positive experience. Good performance is good design. It’s time we treat it as such.” -Brad Frost m http://bradfrostweb.com/blog/post/performance-as-design/ Thursday, November 21, 13
    • Responsiven “Ultimately performance is So…how do you achieve good http://bradfrostweb.com/blog/post/performance-as-design/ Thursday, November 21, 13 m
    • So…how do you achieve good Include performance in project documents. —Call out performance as a primary goal Get designs into the http://bradfrostweb.com/blog/post/performance-as-design/ Thursday, November 21, 13 m
    • User behavior m Thursday, November 21, 13
    • Activity online in 60 secs m http://blog.qmee.com/qmee-online-in-60-seconds/ Thursday, November 21, 13
    • We live in a multiple screen world: m https://docs.google.com/a/mstoner.com/viewer?url=http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf&chrome=true Thursday, November 21, 13
    • We live in a multiple screen world: m https://docs.google.com/a/mstoner.com/viewer?url=http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf&chrome=true Thursday, November 21, 13
    • We live in a multiple screen world: • Two distinct ways people move among screens to get stuff done: simultaneously and sequentially. • 77% of mobile search happens at work or home even though a computer may be accessible m http://searchengineland.com/study-55-percent-of-mobile-search-driven-conversions-happen-in-one-hour-or-less-151432 http://www.google.com/think/research-studies/the-new-multi-screen-world-study.html Thursday, November 21, 13
    • Sequential v. Simultaneous m Thursday, November 21, 13
    • Behavior on different devices “My phone... I consider it my personal device, my go-to device. It’s close to me, if I need that quick, precise feedback. When I need to be more in depth, that’s when I start using my tablet. The other part of it is where I disconnect from my work life and kind of go into where I want to be at the moment...I’m totally removed from today’s reality. I can’t get a phone call, I don’t check my email--it’s my dream world. And then moving to the laptop, well, for me that’s business. That’s work. I feel like I’ve got to be crunching numbers or doing something.” -Bradley https://docs.google.com/a/mstoner.com/viewer?url=http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf&chrome=true Thursday, November 21, 13 m
    • In relation to higher ed… Current Best Practices: User experience and design interfaces m Thursday, November 21, 13
    • @DougGapinski: UX: the art of delighting visitors and the science of getting them where they need to go. m Thursday, November 21, 13
    • American University of Paris m Thursday, November 21, 13
    • Delightful interfaces • http://denison.edu/ • http://www.delval.edu/ • http://getgoingtoday.org/ • http://www.kenyon.edu/ • https://home.oberlin.edu/ m Thursday, November 21, 13
    • Effective navigation experiences • http://www.gatech.edu/ • http://www.miamioh.edu/ • http://www.bu.edu/ • http://www.ucl.ac.uk/ m Thursday, November 21, 13
    • Delightful + Effective • medium.com • https://play.google.com/store • NPR.org m Thursday, November 21, 13
    • A note about image types • jpgs (J-PEGS): Best for photography because of low file size in relation to image compression • pngs (PINGS): Great for graphics that have hard edges (logos) and need a transparent background. • psds (PEE-ESS-DEES): large files that retain the designer’s ability to make edits, not for web use • gifs (hard G!): can contain animations, use with caution: Good / Not Good Thursday, November 21, 13 m
    • A note about animations • Flash is officially deprecated for animation • HTML5/CSS3 animation is back in vogue because animations provide a sense of interactivity and emotional connection that static content can’t match. • However: exercise restraint: http://www.harrys.com/our-story Thursday, November 21, 13 m
    • A note about typography • Almost every great typeface is now available on the web. • Don’t let anyone tell you you have to use Arial, Verdana, Times New Roman, or (gasp!) Courier. But, don’t expect to get the best fonts for free. Thursday, November 21, 13 m
    • In relation to higher ed… Current Best Practices: Content Strategy m Thursday, November 21, 13
    • Content Strategy Don’t sacrifice your users’ needs for your own content agenda • Posting a long form article can be a good thing: • Avoid the “wall of text” • Good example • Don’t assume print content will translate to the web without extra attention Thursday, November 21, 13 m
    • Content Strategy Don’t get in the way of the actions your users want to take • The more clicks it takes to reach an action, the higher your visitor fall off will be. • Keep intro and explanatory text to a minimum. Even better, only show it when it’s needed. m Thursday, November 21, 13
    • Content Strategy Content as Navigation: Users know to click headlines…Learn more often just adds clutter. m Thursday, November 21, 13
    • Content Strategy Behavior as Navigation: If a user keeps scrolling, give them more content. Quartz.com m Thursday, November 21, 13
    • Conclusion: We’ve come full circle (in some ways) m Thursday, November 21, 13
    • Key Takeaways Enduring Best Practices: • Be audience-centric. Consider user’s needs before your own needs. • Deliver a visually delightful and easily navigable experience. If push comes to shove, usability trumps visuals. See: google.com • Assume your users have limited time and a slow connection to the internet. Snappy trumps clever. Thursday, November 21, 13 m
    • Thank you! Sarah Senior Rachel Executi m Thursday, November 21, 13