2001: A Web Odyssey

2001:
A Web Odyssey
m

Thursday, November 21, 13

Your
Sarah
Senior Creative
Director, mStoner

Rachel

Executi
m


About mStoner
• Twelve years of web-ﬁrst 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


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


m

Getting online used
to be a big deal.

m


In 2001…
Web design was limited.
m


Limited by tools
m


Display Resolution
• The display resolution is the number of distinct
pixels in each dimension that can be displayed.

m


Display Resolution
• In 2001, the most common resolution was
800x600 or below.
• Pixels were visible
• Hard on the eyes

m


Screen Resolutions

m


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


Colors

m


Even Pantone was limited

m


Do I still need to choose
web-safe colors?

Nope!

m


Browsers

m


Browsers

m
http://www.w3schools.com/browsers/browsers_stats.asp


Browsers
• Rendering engine: a software component that takes
marked up content (such as HTML, XML, image ﬁles,
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.


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

m

Responsiven
10 seconds
m


Despite limitations…the
internet changed daily life

m


Adoption rates

m


What did it look like?
http://www.jegsworks.com/lessons/web/index.html
http://www.usabilityviews.com/uv000173.html

m


Tulane.edu, 2001
• Text as graphics
• Very small footprint
• Text-only site
• click required to
access search
m


ESPN, 2001
• Busy
• Traditional footer
• Left navigation
• New content at the top
• Underlined links
m


Animated GIF

NBC,2001
• Small (700px wide)
• Minimal content
• Top navigation
• Fresh content
m


Wal-Mart, 2001
• Three column layout
• Left navigation
• Promotional categories
•
m


Microsoft, 2001
• Text-only option
• Lots of navigation
• Last updated
• Full screen width
(right side of top
nav slides)
• Appearance of the feature area


m

Fast forward to
2013
m


The internet changed
daily life: 2013
For the ﬁrst time in history, a
president has had to stand in
the Rose Garden to apologize
for a broken Web site.
-NY Times
m


Tulane.edu Today
• Audience-centric
• Socially-integrated
• High-bandwidth
video content
m


ESPN, then
• Busy
• Traditional footer
• Left navigation
• New content at the top
• Underlined, blue links
m


ESPN, now
• Still pretty busy
• More complex nav
• New content
throughout the page
• Reﬁned use of large
photos and design
elements


m

NBC

Animated GIF

• Small (700px wide)
• Minimal content
• Top navigation
• Fresh content
m


NBC today

Flash ads
Animated GIF

• Large (960px wide)
• Heavy use of
imagery
• Streamlined
navigation
• Nearly all content
is heavy video


m

Wal-Mart, 2001
• Three column layout
• Left navigation
• Promotional categories
m


Wal-Mart
• Mega-menus
• Heavier imagery, still busy
• Still organized by
promotional category
m


Microsoft
• Mega menus
• Streamlined navigation
• No last updated text
• Full screen width
• Well-done feature area
m


User expectations
-“smartness”
-speed
-content
m


Expectations of “smartness”

m


Speed:
How is mobile browsing
like using dial-up?
m


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/


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


Responsiven
“Page response times in the ﬁrst 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


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/


Responsiven
“Ultimately
performance is
So…how do you
achieve good


m

So…how do you
achieve good
Include performance in
project documents.
—Call out performance as a
primary goal
Get designs into the


m

User behavior

m


Activity online in 60 secs

m
http://blog.qmee.com/qmee-online-in-60-seconds/


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


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


Sequential v. Simultaneous

m


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


m

In relation to higher ed…
Current Best Practices:
User experience and
design interfaces
m


@DougGapinski:
UX: the art of delighting visitors
and the science of getting them
where they need to go.
m


American University of Paris

m


Delightful interfaces
• http://denison.edu/
• http://www.delval.edu/
• http://getgoingtoday.org/
• http://www.kenyon.edu/
• https://home.oberlin.edu/
m


Effective navigation
experiences
• http://www.gatech.edu/
• http://www.miamioh.edu/
• http://www.bu.edu/
• http://www.ucl.ac.uk/
m


Delightful + Effective
• medium.com
• https://play.google.com/store
• NPR.org
m


A note about image types
• jpgs (J-PEGS): Best for photography because of low
ﬁle 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 ﬁles 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


m

A note about animations
• Flash is ofﬁcially 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


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.


m

In relation to higher ed…
Current Best Practices:
Content Strategy
m


Content Strategy
Don’t sacriﬁce 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


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


Content Strategy
Content as Navigation:
Users know to click
headlines…Learn more
often just adds clutter.
m


Content Strategy
Behavior as Navigation:
If a user keeps scrolling,
give them more content.
Quartz.com
m


Conclusion:
We’ve come full circle
(in some ways)
m


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.


m

Thank you!
Sarah

Senior

Rachel

Executi
m


2001: A Web Odyssey

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (6)

Semelhante a 2001: A Web Odyssey

Semelhante a 2001: A Web Odyssey (20)

Mais de mStoner, Inc.

Mais de mStoner, Inc. (20)

Último

Último (20)

2001: A Web Odyssey