Download to read offline
Uploaded byMatthew W. Bowers
The Modern Web
The document provides a historical timeline of the internet, highlighting key milestones from its inception in 1989 to the rise of major websites and technologies that define the modern web. It encompasses the evolution of web design and development best practices, emphasizing mobile-first and modular approaches, as well as the importance of performance and accessibility. Additionally, it addresses the challenges of selecting Content Management Systems (CMS) and the architectural considerations necessary for a scalable digital footprint.
More Related Content
The Modern Web
- 1.
- 2. Agenda A History Lessonand 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 theInternet! History of the Internet
- 4. A WALK THROUGHWEB 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 WebSite 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 WebSite 6
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16. Desktops & LaptopsTabletsSmart Phones Touch Friendly Today…
- 17.
- 18.
- 19. The Modern Web -Design Avocode Affinity Sketch Macaw Marvel UX Pin Antetype Webflow Form 19
- 20. The Modern Web - Development SublimeText Chromedeveloper 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.
- 23.
- 24. •Accessible •Performant – averageusers 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 •Videosand 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 responsivehero 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 ExistingCustomers 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 ArchitectureThe 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 mayinfluence 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.