 Yeah, so this is death to slide decks why your next presentation needs to be a web page again My name is Rachel Winchester if you could just call me win And this website is at my own domain visual webmaster comm slash death to slide decks There's one thing I want to point out if you really like this presentation And you want to see it again, or if you want to recommend it to your friend I'm actually giving it this presentation again next week to the black press meetup. So Black press shout out to black press You can join the black press meetup at all the other meetups at meetup.com and this is next Wednesday at noon All right Great. Here's my presentation. It's gonna go full screen So I'll start off with just a question pose to a gift to all of you and you can answer out loud Just just say what whatever comes to mind when you think of the word page what comes to mind Okay, okay, okay, so the reason I'm asking is because Your answer could have a have to do with a lot of different factors I took I said before that I am a product designer, but my background is actually in art history I have a degree in art history And art history is a lot more than just you know studying Paintings in museums. It's looking at the entire visual culture. How do people see based on the technology that's around them? What are they looking at? What are they look using to see so a lot of Your answer for this question could depend on What you saw around you growing up if you had web pages around or just books If you grew up with the internet and computers or if you grew up with Using that technology in that way or or not so I'm trying to Get you to think about technology visual culture, but also history and and and generations All right, so this presentation is structured in three parts and I'm starting with the when so again I studied art history it was I love doing that and I Was a great way to look back at how things were to understand Why we are the way we are in the present and understand things moving forward? So I structured this this present state presentation to start with the when so that we can take a look at history And then we can figure out why we need to change and why web page presentations make so much sense right now So in the past Slide shows started around circa sixteen hundred these were images shown one by one in sequence an image would be Created in a in a material called acetate that was my transparent and Put in front of a projector with a light source and the image would be projected on to the screen So we get the slide deck from the slide show images one by one in a deck Shown in succession in a sequence sequence to kind of tell a story and give up a Presentation so that's where we get the slide deck. That was a long time ago Who remembers the 1600s? Right around 1987 is when Microsoft PowerPoint came out with With when Microsoft came out with PowerPoint So this actually predates the mass adoption of the internet So the first PowerPoint was used on computers that weren't necessarily connected to the internet Here's a picture of Apple Macintosh one that I think is from 1984 So the original PowerPoint was on devices like this Going into the future. We're still using PowerPoint on newer devices Laptops touchscreens smartphones and tablets, but it's still the same PowerPoint Maybe they've added some more bells and whistles and audio and and other things, but it's still the same idea Slides shown in succession one by one Google added some cool stuff by making it putting it in the cloud. You can collaborate in real time, but it's still PowerPoint So now how do we transition into the future? So slide decks slide shows and PowerPoints are tied to a time when content was static and contained in finite pages We navigated through content by moving from slide to slide page page to page. We had to turn the page or hit next So here's an old photo of some ladies in the library or someplace reading very large newspapers Having to turn those giant sheets over and over, but that that was the content that was the way news Was put out on in that kind of way on those giant sheets of paper But even fast forward to more modern times where we're using e-readers It's still the same format So they just kind of take the same format of a page or a book and they put it inside of a digital device So with this e-reader, excuse me, e-reader You probably have to swipe to turn the page or maybe click the button So it gives you that illusion of reading a paper of book so Noticing all these technological advances. I really look back to my own art historical Knowledge and remembered this huge point in history the horse in motion by Edward Moybridge this Is such a big point in history because he's solved a huge problem that a lot of us were having so Transitions have always been a problem with visual storytelling But now there are modern solutions. So Edward Moybridge in Philadelphia of all places in 1878 Figured out how to give the illusion of motion in a video by rapidly showing These 16 frames in in rapid succession So you see each frame is just a little bit different from the next and Each of these 16 frames are showed in succession in that in that gift So it's the illusion of motion and that's how video is created So he solved a huge huge problem by coming up with this By coming up with motion picture this way this also reminded me of Just myself growing up and seeing seeing other types of imagery not necessarily video, but other types of digital digital screens images on screens where the transitions Got better and better with time So on the left you see a gift of Gallagher the arcade game If you were growing up in maybe the 60s 70s 80s Going to the arcade and seeing all these Eight bit games get better and better in a higher higher resolution You know, maybe this This game was was this kind of made sense to you However me when I was introduced to this game maybe around 2005 or 2010 just thinking about my age This game was disorienting. It was it was weird I couldn't tell like if the missile actually hit me or if I got the missile to hit the alien or the Whatever those things are the frame rate was it was just too choppy Because the frame rate wasn't wasn't what I was used to seeing when I'd watch Nickelodeon and cartoon with video and And and you know high resolution video with fast frame rates where the where everything is very lifelike This was not lifelike for me and it was disorienting Another example from the past if you think of Older computers with a really old interface if you scroll down through content too fast The content will take a while to load So if you're used to scrolling up and down your page like we are today like this We know the content loads quickly But in this older interface if you scroll down all the way to the end of the page You have to wait a few seconds for the content to appear So as transitions get smoother content becomes seamless today we can present content in a way that matches how we naturally view and experience the world So in the present we have digital video circa 1986 As I've explained before digital video is made of images displayed in rapid frequency I decided to show this video because showing clapping Capturing clapping and wrap that rapid movement and then displaying it again to an audience That's hard. That was hard historically speaking. This is a very new kind of accomplishment Also in with video we've got graphics interchange format so Gifts gifts or gifs gifts gifts. I was saying it right, right? Okay So gifts are still a newer kind of media file, but not the same as a digital video It's much smaller media file because as you can probably tell there's Maybe a handful maybe a dozen images in this in this sequence that are in that media file So it's much smaller than a video file, which is why gifts are popular because they're much smaller files Hmm So not only has content evolved drastically, but so has the way that we interact with content So digital interfaces exist now we've started with Keyboards and and a mouse and now we've got touchscreen Now we've got even VR and other other types of actions and ways to control digital interfaces We've even got video games This guy's playing a video game a first-person shooter game inside a smartphone Using only his thumbs to control his character in that virtual world And also using his thumbs to control the interface and hit the buttons around the outside This is all very new. I mean we're maybe used to it now, especially people at a word camp very techy people But historically speaking, this is very new So some of this history that I'm referencing is web 3 web 3 is a multi-faceted words has a lot to do with you know blockchain and and AI and and just The idea that internet is everywhere So because the internet is everywhere and the internet is ubiquitous It's starting to we're starting to understand that visual language Everyone people young and old are Are using internet connected devices digital devices and we now all are starting to understand The internet as its own language So Times have changed and it's time to transition into the future On number one. I only have a couple in here because So my thesis is that web page web page Presentations fit in with today's visual culture. They match how we naturally view and experience the world So today in 2023 Everyone's got a smartphone who doesn't have a smartphone. Okay, who doesn't have a laptop? Who doesn't have a TV? Okay So this kind of imagery again thinking about art history and visual culture It's the things that we're using to see and it's the things that we're seeing around us that help us create this kind of visual Language that we can use to communicate So let's all get on the same page now Okay, I guess that wasn't funny So in the future aka now starting now We should think about content in terms of where it's like frame window feed viewing area and canvas And I think a lot of you are probably already aware of these words using within use being used with tech And we can think about interactions in terms of scroll zoom swipe click pinch, etc So again, this is this visual language that we are starting to all get on board with just because the internet is ubiquitous So this is really getting into the why why we should switch to web page Presentations and leave PowerPoints in the past So content today again in digital interfaces we have a canvas so canvas Before I mean without a before a computer a canvas was just a place where an artist can create similarly designers use Softwares like figma adobe's and sketch and those have canvases where we create so this darker square on the inside of this Figma screen is called Inside of the screen is called the canvas Frames everyone knows frames from their glasses a lot of people wearing glasses around here frames on around a painting or an image so a frame is something that that Encompasses the content similarly It's going back to figma a frame will encompass content So here I've designed an app screen and this purple square that I've selected is a frame So I've selected that piece of content I could even select the whole phone and that could that'll be a frame so frames are just The part of content that you're currently looking at More frames With digital video so depending on the frame rate of a video or gif it can look choppy or smooth So frames are very important with video because that's what makes it lifelike And it's also what makes gifts so funny Because gifts are choppy. I think they work so great for comedy Baseball fans out there raise your hand if you watch baseball are you a Braves fan Oh Sorry, sorry But yeah, that's the the Phillies fanatic That's the green monster and the Phillies flyers the hockey team mascot Gritty, yeah, Philly has the best mascots All right viewing areas similar to frames and screens viewing areas Aka viewports are the area of a world that you are currently looking at So this guy is using a VR headset every time he he's he moves his head side to side He's he's looking at a different viewing area so similarly with Video games when you are in it have a character in the world The world that you are currently seeing the part of the world that you're currently seeing is a viewing area Windows I think windows are easy Everyone's seen windows and we've got windows computers with windows in them. Sorry accidentally Oh, yeah, more more windows Thank you for that Interactions with content scroll the scroll is super popular We've had scrolls before Before digital interfaces and now we've got a lot more scrolling in digital interfaces scrolling is very popular it's practically addicting as We've learned from tick-tock and Twitter and Facebook and all those feeds with an endless scroll Tick-tock on the clock and the scrolling don't stop anyone on tick-tock Use your hand if you're on tick-tock How could you can spend all day on it? Can't you? Yeah, yeah It's the content, but also the way we interact with it Pan and zoom if you are a photographer you probably use these words pretty often When you pan is when you move through a viewing area and zoom is when you go in or out of a viewing area so if this photographer was had her focus on The cyclist the cyclist would be in focus as you see and the background is blurry because she's following the cyclist Sand zoom and pinch Can be used all together with digital interfaces digital interfaces, especially touch screen this guy is using a Tablet to I don't know discover the moon panning zooming pinching just to explore the viewing area and click press I Think we all know what that is. All right, so here's a screen. I put together to kind of as it like an analogy of Well, it's a bit of everything put together So first we're looking at the beautiful city of Philadelphia. Who's been to Philly? The city of brotherly love. Yes. Oh The video stopped. Hey, huh, okay. Well That is one of the biggest downsides to having a presentation in a web page But that has also happened on a inner on some of the online When I've given this talk online But what I'm trying to show you is you have The whole world a whole world is filled with content as a presenter as a public speaker You have an entire world of content at at your fingertips to include in your presentation You want to tell a story you want to have a narrative have a thesis or an argument? So you need to strategically take the content and sequence it and Display it to your audience to tell that story So if the world is filled with content and I'm showing you the whole world I have added this Monitor on top of the world to show you that you can Select and show the specific part of the world that you want to show to your viewers at that time So here's the mall that's going towards South Philly. I think that's City Hall But also this screen the section of this web page is probably something that you can really Most easily build in a web page is not something you can easily put in a PowerPoint I use elementor to build most of my sites, especially this especially my presentations and Elementor has a as a really cool feature where you can turn on mouse effects. So I've added The mouse follow I forgot what it's called. Sorry, but this image is is essentially just following my mouse as I move it around But it's also a web page and with the web page. We can pan and zoom we can pinch and and and put some content in more focus or we can zoom out and and and See the bigger picture So this section is pretty much a way to show all of what I've been talking about Coming together in one It still works as a as a static image, but it would work even better if the video was working So sorry about that But maybe it's a good time to talk about the pros and cons of web page Presentation so I think we've realized a big con is just Wi-Fi So pros and cons some advantages of web page Presentations and I'll show some cons potential issues to be aware of but also how to get past them And I'd love to if you guys think of more pros and cons I'd love for you to let me know in the Q&A afterwards So first of all, of course, it's a living document. It's a web page You can update as needed. You can fix errors if your brand changes You can update the brand in in the style guide, you know, it'll just transfer over to your web page You can treat it as a web page as we all know. We're all WordPress people here You can be a lot more creative so you can do everything you can do with a PowerPoint and so much more And then of course SEO and marketing. I think are the biggest reasons that I make web page presentations You it's it's on my web page. Oh, it's our it's on my website I share the link everywhere every time I give the same presentation. I post that same link So this this page on my website is probably the most visited page but it's it's really It's great for for all that SEO and marketing As far as cons go so you have to develop a website or a web page at least I guess that's not too hard for people in this room, but for other people They're they're easy ways to learn to build a website. You can use page builders and CMS I also have a tutorial for how to use Elementor and get started with Elementor If you if you want to use the same tools that I do But if you don't have the resources to make a site or the time you could try these other options So Google Docs has a new page list format. Has anyone tried the page list format yet? I Love it. It is revolutionary, isn't it? It's under the I think it's under the view tab, but when you scroll down instead of having a page break It's just seamless content So if you you can use that as a presentation put it in full-screen mode Make images big that make the text big and you can just turn a Google doc into a presentation same with tumblr if you have tumblr is kind of like a Social media site, but your page can be a little bit more customizable so you can add more aesthetic stuff And then a blog post so let's say you are part of an organization that has a website And maybe you contribute to the blog of a blog A blog post can easily be turned into a presentation So instead of creating your own website, you can just add to your organization's website instead Accessibility Is a con but it's also an interesting question So I mean you can do the normal tips like you know add alt text to photos follow the correct heading outline structure course scroll slowly and Other some some other tips like using mouse effects instead of animation. So using Making sure I can control movement with my mouse rather than having an animation just autoplay without my control so That's that's one reason to use mouth it mouse effects use REM for paragraph text this Exactly thank you so it can scale easier and Also add a disclaimer in the header, so I'm just going to scroll up real quickly to show you my accessibility disclaimer in the header This is above my title slide, so I started on this slide But it wasn't the first oh, and it's not a slide. It's a section of a web page Accessibility notice I I it's this is a presentation which means this web page is supposed to be I'm supposed to show it to you. It's not necessarily made for you to go through on your own So that's the accessibility question if someone does find an accessibility issue Going through this page on their own is that an issue I'm going to use the table of contents to There we go Yeah, so if I am supposed to be presenting this web page if someone finds an accessibility Issue when they discover the web page on their own is that necessarily an issue? So that's that's still a question. I'm trying to figure out And another con is performance I'm sure you've noticed this is a long web page with a lot of photos and other other assets So it could it could definitely be hard to keep the performance where it needs to be so you can add Features like lazy load. You can create a static website. My my website is static. So that means that After I create the page when I deploy the website It's all the pages are kind of compressed into a tiny html html file and it's and it's when a When a visitor visits my site that small file is sent to their computer their Client, so it's not a dynamic two-way connection the way like you know an e-commerce site might be it's just it's it's a It's just a it's just so it's simple web page And you can also consider your web host when creating web pages like this So I'll just go over a little bit more about how to build web page presentations and Some elements that I like to add and some tips and tricks That that I try to stick to Of course media is a big one to Photos videos and gifts are essential for visual storytelling so add a lot of photos and make them big Links are essential for marketing and SEO to keep your spot into your presentation have links open in a new tab rather in that same page And for accessibility add a disclaimer to your header that the links open in the new tab Table of contents as you see to the left in the sidebar. I have this table of contents here It's a little Formatted a little weird there, but it's great for Again going back and forth through the sections especially in Q&A when I want to quickly go to a specific section Social share I had my social share buttons are at the top and again at the bottom essential for marketing And make it easy for your audience by putting them in obvious places Accordion accordions are great. You can hide content until you want your audience to see it like I had in the pros and cons section Reading progress bar. So that's that red bar at the top that you see As I scroll down the page it gets longer and longer. So it shows you how how close to the end I am And sometimes your web the web pages scroll bar isn't visible in every web browser So some users turn this off intentionally. So it's good to have that reading progress bar Animations keep things interesting by adding movement, but don't overdo it They can be distracting Hover effects use it to draw attentions to a specific spot in your presentation I was using hover effects with the photos So all of the photos were in black and white and then when I referenced them I put the mouse I I hovered over the image and it would turn to full color a Header and footer announces the beginning and end of a presentation great branding opportunity and Also a great way to collect collect questions and comments. So I do have an actual form in the footer where you can Submit submit questions and comments the sidebar helps with navigation and is another branding opportunity and Then forms collect feedback comments and questions in targeted spots So if I wanted to I could have put a form Maybe in the third section right after I asked you that question What it will comes to mind when you think of the word page I could add a form there and have people actually submit their answers And it helps make the presentation more interactive And some more tips these are great tips I guess for all visual storytelling, but especially web page presentations Minimize clean up your browser window by hiding the book books mark Excuse me bookmarks bar and closing unnecessary tabs. I actually just went full screen, which is easier Use a lot of white space and stay away from unnecessary and distracting elements Definitely try and stay minimal Narrate use your cursor like a laser like a laser pointer and say each interaction you take Not every interaction is obvious to your audience. You ever see someone in a presentation like Hover over a button and you don't know if they click it or not Yeah, yeah, you got to say when you're when you're gonna click something. It definitely helps Compose Composition and storytelling will always matter the most think how can a web page format tell my story better Create make something visually appealing to your audience express yourself in your brand and creative ways and have fun with your designs so I Think web page presentations are cool and new But I think there are all other types of other formats for presentations that I should try out and see how that works, too So next time you might see from me presentations on like a digital canvas, so maybe an entire presentation in figma Or presentations in VR and an AR. I know some people who are already doing that in this room All right, so thank you. Thank you all for coming to my to my presentation I We I would love to just discuss your questions and especially pros and cons if you've noticed anymore And I do have this form as well if you have longer More more feedback to give or anything like that So thank you so much for coming. Okay. Well, I start I start with the accessibility notice. That's some presentation dates I don't know why I forgot to add word camp Atlanta here It should be like right here, but the black press meetup is there, too and share buttons oh So you've probably missed my opening question And so you probably didn't get the pun because you didn't see the opening question Yes You know Yeah Actually Yeah Thanks, thank you Yes You I start everything with an outline. I I I love outlines some things up with the formatting of of the Of my table of contents right now, but yeah, I'm just trying to show you the outline But yeah, I started with an outline, you know You know, I have the three sections one why how Three is a good number It's you know kind of reminds me of those five paragraph essays We always had to write in school and got an intro three arguments and then an outro So yeah, I tend to start with an outline and then fill the content in the outline and then the thing just gets longer and longer So I had to kind of never really think in terms of turning a page Yeah Yes Edge Oh Yeah Yeah, I'm using the table of contents elements in Elementor so Maybe oh Am I no longer connected to the internet? Oh Well, I'll reconnect Anymore question. Oh, I'm connected again. Okay Well, I guess really the biggest con is that it is you do need the internet. Yes You mean the the form Well in this presentation, I just have a form at the very end to collect questions and comments About the presentation I Said, you know one another example is if I wanted to I can add another form here like Posing the question. What do you think of the word page? What comes to mind and then having a form where people can actually input answers into the site? You know, I could have you know directed you to say like oh scan this QR code to visit the The page on your own browser and then you know enter your feedback here I could have added interactions like that Oh, I'm actually using just Google Forms. Yeah, just a Google Form embed, but you can do that too Yeah, I tend to use a lot of Google products so And it's a static site so I think because it's a static site it it works better with a Google form than a native form I Can make it bigger You Is Yeah, I mean if this was an internal presentation I would probably you know, maybe put up a password page or you know not not posted anywhere or you know I There's definitely a difference between an internal presentation and a marketing presentation Or Well, if I were to build a web page presentation for a client I would probably approach that the same way I would build a website for a client You know, do they already have a site? Can I just add a web page to that site? Does it make sense for them to have their presentations at a different URL? Would a blog? Would it would a Google page list format make more sense because that would just be a Google URL But yeah, I would just treat that just like any other website client You see generation But I Why Yeah, I think the the most resistance comes from just Thinking about having to put a web page together So if you're already building websites and you're a WordPress person doing this daily That's not intimidating, but if all you do is you know, you're you're normally just in Word doc Then building a web page might be intimidating As far as like The format of like do do I see if older people prefer slides versus younger people prefer page lists? I Don't know yet. I don't know yet Yeah, I don't know I mean I My audience has for this presentation has been mostly WordPress meet-ups and mostly like this audience like this And I get kind of the same reactions like it They like scrolling down I Haven't had anyone say yeah Yeah, I haven't had anyone say to me like oh I miss I miss hitting next site. I miss the the page turn Yes Actually when I when I see people use a smartphone and I and I can see that their thumb is moving this way I kind of think they're on Tinder Yeah, I usually see this but yeah, I guess you know you can read a book on a phone and do that Oh The videos I Outline yeah Yeah, so I think Sometimes I'd manually build a table of contents using anchor links, you know like sometimes I don't want You know all of the headings to be in the in the table of contents of sometimes I'll build it manually, but um Yeah, okay, okay, I like that idea I Like that idea Well, this is my first time giving this presentation In person all other times I've been like webinars where I'm just like alone in my room So thank you for being such an amazing audience with so much feedback and other tips for the future I Would love to see you guys make some web page presentations If you do send them to me, so maybe I'll put some other examples at the bottom of this web page Question Just this page or the one with the skeleton Oh this And if they feel like Steve Jobs in this turtleneck, thanks