SlideShare a Scribd company logo

The Modern Web

•
•
Matthew W. Bowers
Matthew W. Bowers

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 of 33
Download to read offline
The Modern Web 1
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 I invented the Internet! History of the Internet
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
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
The First Web Site 6
The White House 1994 7
Yahoo! 1996 8
Excite 1998 9
MSN 2000 10
2000 11
MSN 2008 12
Ameren UE SharePoint 2007 Later Upgraded to 2010
Washington University 2008 SharePoint 2007
Royal Canin 2010 Custom - eCommerce
Desktops & Laptops TabletsSmart Phones Touch Friendly Today…
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/
The Modern Web - Technologies Design DevelopmentPlatform 18
The Modern Web - Design Avocode Affinity Sketch Macaw Marvel UX Pin Antetype Webflow Form 19
The Modern Web - Development SublimeText Chrome developer tools jQuery GitHub Twitter Bootstrap Angular.js Sass HTML5 CSS3 20
The Modern Web - Platforms Adobe SiteCore Acquia Drupal Episerver Oracle IBM Bloomreach Opentext SiteFinity 21
Gartner WCM Magic Quadrant 22
Forrester Wave WCM 2017 23
•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
•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
•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
•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
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.
CMS Selection Challenge – The Landscape Challenge: Selecting a short list from a wide landscape of choices. The space is very “noisy”.
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
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.
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?
Got Questions?

More Related Content

The Modern Web

  • 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
  • 16. Desktops & Laptops TabletsSmart Phones Touch Friendly Today…
  • 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
  • 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?