This session will be an introduction to concepts relative to the Modern Web. The Web has come a long way since it’s inception over a quarter of a century ago. We will explore a bit of history, where we were, how far we have come and the new technologies that deliver on the promise of a modern web experience, and digital transformation. We will define “the Modern Web” and explore selection criteria for a few of the tools of the trade. The goal is for Scorpions to walk away with a better understanding of the concepts and thinking relative to the Modern Web and to generate further interest in the domain.

1. The Modern Web
1

2. Agenda
A History Lesson and Timeline
Some legacy web sites – step back in time
A Modern Site
What is the Modern Web
Selecting a Platform and Architecture
Questions

3. 3
I invented the Internet!
History of
the Internet

4. A WALK THROUGH WEB HISTORY
1989
WWW begins as CERN by scientist Tim Berners-Lee
Source: Pew Research Center, “World Wide Web Timeline”, 2014
1990
1st website and server go live
First web browser
It was called WorldWideWeb and later renamed Nexus
1991
First live cam – COFFEE POT
1992
Term “surfing internet” coined
Tim Berners Lee posts first photo
1993
CERN places WWW in public domain
1994
First known web purchase – Pizza Hut
Yahoo Launched
1995
Match.com, Craigslist , eBay, and Amazon launched
1997
Google launched
2001
First viral video – Dancing Baby
Wikipedia launched
2003
LinkedIn, Skype, WordPress launched
2004
Facebook launched
2012
eCommerce sales top $1 trillion worldwide

5. The First Web Site
The first web page went live on August 6, 1991. It was
dedicated to information on the World Wide Web project and
was made by Tim Berners-Lee. It ran on a NeXT computer at
the European Organization for Nuclear Research, CERN.
The first web page address was
http://info.cern.ch/hypertext/WWW/TheProject.html.
It outlined how to create Web pages and explained more about
hypertext.
No screen shots were taken of the first web site prior to 1992.
5

6. The First Web Site
6

7. The White
House
1994
7

8. Yahoo!
1996
8

9. Excite
1998
9

10. MSN
2000
10

11. 2000
11

12. MSN
2008
12

13. Ameren UE
SharePoint
2007 Later
Upgraded to
2010

14. Washington
University
2008
SharePoint
2007

15. Royal Canin
2010
Custom -
eCommerce

16. Desktops & Laptops TabletsSmart Phones Touch Friendly
Today…

17. 17
https://www.solutionsiq.com/wp-contentflat-education/uploads/2016/11/Semantic-Web.jpg
https://flatworldbusiness.wordpress.com//previously/web-1-0-vs-web-2-0-vs-web-3-0-a-bird-eye-on-the-definition/

18. The Modern
Web -
Technologies
Design
DevelopmentPlatform
18

19. The Modern
Web - Design
Avocode
Affinity
Sketch
Macaw
Marvel
UX Pin
Antetype
Webflow
Form
19

20. The Modern
Web -
Development
SublimeText
Chrome developer tools
jQuery
GitHub
Twitter Bootstrap
Angular.js
Sass
HTML5
CSS3
20

21. The Modern
Web - Platforms
Adobe
SiteCore
Acquia Drupal
Episerver
Oracle
IBM
Bloomreach
Opentext
SiteFinity
21

22. Gartner
WCM Magic
Quadrant
22

23. Forrester
Wave WCM
2017
23

24. •Accessible
•Performant – average users
expect 2 sec load times, 40
percent will abandon if over 3
secs.
•Progressively enhanced –
deliver best possible
experience to widest possible
audience
•Device Agnostic
•Content First
24
https://medium.com/@jonyablonski/the-modern-web-is-7edf114542db
The Modern Web
Best Practices

25. •Mobile First
•Modular - Modern web
experiences are no longer
designed as pages. Instead,
we’ve embraced the creation
of systems for scalability,
portability, and reuse.
•Purposeful design
•Collaborative effort
•Personalization
25
https://medium.com/@jonyablonski/the-modern-web-is-7edf114542db
The Modern Web
Best Practices

26. •Unique and large
typography
•Videos and Patterns as a
background
•Bold colors
•Vintage look
•Cards and card design (think
Pinterest)
26
The Modern Web
Common Elements
https://www.techwyse.com/blog/website-design/top-modern-web-design-elements/
https://blog.hubspot.com/marketing/elements-of-modern-web-design-list

27. •Large and responsive hero
images
•Flat design
•Flat icons
•Hamburger menus
•Giant product images
•Short product or feature
videos
27
The Modern Web
Common Elements
https://www.techwyse.com/blog/website-design/top-modern-web-design-elements/
https://blog.hubspot.com/marketing/elements-of-modern-web-design-list

28. Architectural Considerations
End-Users
Potential Customers
Existing Customers
Internal Users
Channels
Mobile
(Hybrid)
Website
(HTML CSS JS)
Social
Other
Channels
Other
Channels
External Web Footprint
Systems
Web CMS
Other
Channels
Other Internal
APIs
Other
Channels
Other Core
Systems
Reporting
Reporting
Database
Web Reports
& Analytics
Internal IT Functions
Services
Content API
Inventory API
Analytics API
Other
Channels
Other APIs
Scalable API services to
power the digital footprint.
Services in API layer are segmented by
content area or function.
• Separation of concerns ensures that each
layer is optimized for a specific need.
• Micro-service architecture aligns with agile
development.
• Improves ease of making incremental
upgrades to components.
• Provides ability to scale individual services
based on needs and demand.
Segmenting services provides a
nimble basis for development.Scalable APIs Shared Codebase Multi-Channel Engagement
Organizations today generally desire to be a
Technology Leader in the their Industry; or a disruptor.

29. CMS Selection Challenge – The Landscape
Challenge: Selecting a short list from a wide landscape of choices. The space is very “noisy”.

30. Types of Architecture
• Maximum code reuse and developer control
• Limited CMS features (custom developed)
Fully Coupled
Progressively Decoupled
• Limited code reuse and developer control
• Full CMS features for content authors
• Partial code reuse and developer control
• Configured CMS features for content authors
Admin
CMS
DB
CMS
Public
SRC
DB
AdminCMS
DB
CMS
Public
APP
SRC
API
cms
cms
cms
a
p
p
Admin
CMS
DB
CMS
Public
APPSRC
API
Developer
Control
Editor
Control
Fully Decoupled

31. Criteria Definitions
Framework Description
Architecture The underlying design principles that determine how the system is supported as a whole and governs the approach
for component design.
Security The platforms ability to protect the enterprise system from potential vulnerabilities and minimize impact in case of a
successful breach.
Ecosystem The quality and prevalence of components, tools, and professional services available to extend core platform
functionality.
Performance The system’s capacity to provide a consistent and streamlined quality of service to users and applications.
Maintainability The system’s capacity to support structured customizations and reduce friction for routine maintenance tasks.

32. Other Considerations
Requirements may influence what platform and architecture makes the most sense.
Hybrid Mobile
Multi-Channel
Modern UX
Revenue Mgmt
Web Analytics
Customer Portal
What features are the most important for initial rollout?
How can Sense Corp add value and mitigate risk for upcoming implementation?

33. Got Questions?