| 0:02 |
[Music] |
| 0:14 |
hello hello it's dean and dave hope everybody is doing well on this fine saturday |
| 0:21 |
um i am coming to you and gonna apologize right out of the |
| 0:27 |
gate here i haven't live streamed in a while why well |
| 0:33 |
i've got computer problems finally got them fixed today so i'm happy to be online again and today |
| 0:40 |
i'm excited because i have with me somebody who's been on the show before |
| 0:46 |
and it's aaron lopez aaron how are you doing today great how |
| 0:52 |
are you i'm doing good hope things are good up there up north west let me see north west yeah |
| 0:58 |
northwest that's right it's good to have you on again we had a good time last time we |
| 1:04 |
were talking about um oh gosh what were we talking about oh yeah design first that's what it was |
| 1:10 |
yeah in that approach you know that's like the probably one of the top viewed uh videos so i i kind of keep that one up |
| 1:17 |
there and featured so it's good to have you back again and do another one yeah thanks for having me |
| 1:23 |
again that's great well today we're um you know we're going to be talking about a cool little topic which you can already |
| 1:29 |
see the title on the screen but i'll switch over here just to do a brief you know introduction of |
| 1:34 |
aaron aaron tell me a little bit about you and your company for those that do not know you |
| 1:40 |
yeah so i'm the developer at wolf x machina interface development so um i'm a |
| 1:47 |
dnn developer of course and i use a lot of too sexy content to create really nice interfaces for themes |
| 1:54 |
modules websites structured content and all that kind of stuff and develop a lot of solutions for in that |
| 2:01 |
dns space as well that's great so you're open for business you you guys are operating right now |
| 2:07 |
right that's right yeah okay good good deal good deal how would people get in touch with you if they wanted to reach out |
| 2:16 |
yeah just uh through my website woolfactsmacina.com i also run a blog which they can you |
| 2:22 |
know if they want to know some interesting dnn or or design sort of |
| 2:27 |
uh skills they can go there and i'm pretty active in the dnn open help group as well oh yeah |
| 2:33 |
that's a good one um so i think it's openhelp.slack.com maybe |
| 2:39 |
don't quote me on that but right but try it out and see if that works uh if you're not a part of that uh community that is a great little |
| 2:46 |
community to get some you know quick advice on things and you know all that so join us over |
| 2:52 |
there and you'll see aaron in there answering some you know questions and all that good stuff so be sure to |
| 2:59 |
reach out to aaron if you need anything because i guarantee you're gonna be impressed with some of the stuff he's going to show us today |
| 3:05 |
we are talking about open graph and what the heck is open graph uh in dnn specifically and what that |
| 3:13 |
means in the dnn space so aaron tell us a little bit about what in the world open graph is and |
| 3:18 |
why people need to know about it yeah open graph's a protocol i only recently |
| 3:24 |
learned about it myself i didn't know too much about it but basically when you share a link from a website and |
| 3:32 |
you share it on facebook or twitter or even um your phone like on imessage for |
| 3:39 |
example um it shares a card with an image and the title and the description and |
| 3:46 |
the link in a really nice format so instead of you know just sharing you know bullfrxmaking.com and it just |
| 3:54 |
shares the link that's just the text it actually puts up a nice image and everything so it just looks really rich |
| 4:00 |
and uh it's a nice user experience sir and i've seen people share things on facebook you know about hey we |
| 4:08 |
just launched this great website you know and they put their link to the site in |
| 4:13 |
the post itself but it just shows up as a little rectangle with the |
| 4:18 |
title maybe of the site in there but there's no image is this what you're talking about like |
| 4:24 |
yeah exactly yeah and sometimes it's worse than that because it shows you know maybe like just a link in an x |
| 4:31 |
or something like it shows a blank thing i think the facebook will try to scrape |
| 4:36 |
for scrape the page for an image but they might end up finding an image that has nothing to do with the page |
| 4:42 |
uh you know if it's a an unimportant image on the page so yeah so i know maybe maybe putting |
| 4:49 |
you on the spot a little bit but like where did this concept of open graph come from i mean like do you know |
| 4:55 |
how it originated or anything you know to be honest with you i have no idea |
| 5:00 |
i was thinking it's a facebook thing but i i was curious i think they may have uh came up with |
| 5:06 |
the protocol for it or whatever but i but it's used by other social platforms too as well right |
| 5:12 |
oh yeah it's sort of an open protocol so it's used everywhere so it's kind of so it's |
| 5:18 |
not just a dnn thing yeah okay for any anywhere so in dnn like |
| 5:26 |
are there ways that you know of to actually fix that on |
| 5:32 |
on a out of the box site or a new site that you're setting up because my guess is it's not |
| 5:38 |
there by default yeah to my understanding the only way you can do it |
| 5:43 |
out of the box with a vanilla dnn instance is through the page header |
| 5:48 |
tag section which i believe is under page settings and then advanced i think and then it's the page header |
| 5:55 |
tags box um and it's just a text area essentially so you can just dump code in there you can put any other |
| 6:01 |
meta tags you want in there as well and that's one way of doing it but it's not good so these are meta tags |
| 6:08 |
these uh things that are related to open graph of the meta tags then |
| 6:13 |
yeah exactly it's just i think it's prefixed with og oh yeah i've seen that og yeah |
| 6:20 |
okay so my guess is that doesn't lead to a great experience uh for people and |
| 6:28 |
a little bit convol or a little bit hidden i guess in where it is and the average editor may |
| 6:34 |
not even have access to page level settings that's right yeah because you know with |
| 6:40 |
dns permissions you can have different different types of content editors |
| 6:45 |
across the website and they might not have access to that and i think the average person doesn't know |
| 6:51 |
meta tags like an average content editor or client they don't know what meta tags are they don't know how to write them |
| 6:58 |
or maintain them and so page header tag is not a particularly |
| 7:03 |
friendly solution simply because you'd have to know html you know know where to go |
| 7:09 |
to manage that um and then you have to do it page to page by page |
| 7:15 |
and if anything messes up or changes you have to go through all those pages again so it's not a particularly good |
| 7:21 |
experience for for anyone really i was just looking here to see if i had |
| 7:26 |
a a site that i could actually show real quick of how this is done um |
| 7:32 |
just a little bit impromptu here so you gotta vamp for just a second while i look here and |
| 7:37 |
talk about something cool |
| 7:44 |
no i think that um so i guess you could do it in a couple of ways |
| 7:49 |
right um yeah yep i'm seeing one here so what i'm going to do |
| 7:54 |
i'll switch over to a to a screen here just so that people understand what in the world we're talking about here |
| 8:01 |
um we've got a site here that recently launched and you know because |
| 8:06 |
it's a uh restaurant i mean they're really active on social media so |
| 8:12 |
one of the first things we launched the website and it was like okay we're posting links but nothing's |
| 8:20 |
really showing for it why is it not showing something for it so we needed to put a really quick fix and we still need |
| 8:25 |
a better solution for this but i i noticed that this is kind of a one-page website so we didn't have much |
| 8:32 |
work to do uh you know what i think i may have logged out uh yep i did sorry let me log back in here |
| 8:39 |
real quick but show people where uh |
| 8:46 |
if we get that little thing there i probably shouldn't have done this on the fly should i but we go into edit mode here and go |
| 8:54 |
into the page settings and of course i clicked that let's go under here |
| 9:03 |
so we're in the page settings and over on advanced and |
| 9:08 |
seo i believe so this is where where we put in the meta tags real quick |
| 9:14 |
and you know made it it looks so i think that's what you're talking about the og colon and then there's a whole set of |
| 9:21 |
them that's available and possible to put in there and there's one in there i think for facebook that |
| 9:27 |
you don't even need but it's like app id uh right now you don't have to set up but uh yeah so |
| 9:33 |
i mean obviously this is more technical and developer centric right so it's not |
| 9:40 |
not very friendly for people to maintain and so forth so i i mean we'll jump back over but like |
| 9:47 |
i was thinking also that they've got modules out there like i'm thinking of |
| 9:53 |
some of the blogging modules and stuff like that that does handle open graph stuff |
| 9:59 |
kind of automatically behind the scenes or they provide some settings in there to update those |
| 10:06 |
on an article by article basis i mean that's pretty good yeah that's |
| 10:11 |
right those yeah some blog modules ones i use definitely have open graph and they they work great |
| 10:17 |
because it's just per article you've got open graph kind of running um dnn just regular pages don't |
| 10:25 |
don't have you know open graph implemented in any way um i know there is a i think an |
| 10:32 |
open source module you can download from from github um i think um |
| 10:39 |
which is one one solution um i'm personally always like to kind of keep keep the number of modules i have |
| 10:46 |
installed to a minimum and open graph is one of those types of things that |
| 10:51 |
it's definitely important to have but it's not like i don't know if it warrants its own |
| 10:57 |
module in a sense so i can leverage you know the modules i have |
| 11:02 |
um that's always kind of a better solution okay so so there's definitely some |
| 11:08 |
benefits to those modules and the pages in which they generate or they live on but that's not |
| 11:14 |
a great solution for the site as a whole um you're not always sharing articles or blogs |
| 11:20 |
you know on that or or even events you know in the case of some of those modules that i think |
| 11:26 |
support events as well um so like how how do you envision |
| 11:31 |
someone implementing a solution that is a little more friendly for i mean even the content editor or the |
| 11:39 |
administrator of the site yeah definitely so you know what happens is um |
| 11:46 |
usually i get sort of requests from my clients my customers for you know in this case it actually |
| 11:53 |
started off with something as simple as can you can you make it so that this page has the |
| 11:59 |
the nice facebook card style so it really just kind of starts there and what they're asking for is the user |
| 12:04 |
experience they're wanting the user experience to be the best and um that's sort of |
| 12:12 |
always where i start and so obviously my my first reaction was okay well give |
| 12:18 |
them the the directions to get to the page header tags and then they can put in that code but that's not really a |
| 12:24 |
good content editor experience that's just too challenging for people who don't know html that's true |
| 12:30 |
um and it's not even a good developer experience either like for me for example because |
| 12:36 |
you know even though i know those tags i don't really want to have to to manage those things um per page you |
| 12:42 |
know and have to look through people's code and and gather all that stuff for them so um whenever i'm thinking about |
| 12:51 |
solutions i always break it down into three kind of personas or groups so you have the user |
| 12:57 |
experience you have the content editor experience and you have the developer experience |
| 13:03 |
and i always kind of think about it this way if like as a developer i'm also a |
| 13:11 |
content editor and i'm also an end user and if you're a content editor |
| 13:17 |
you're a content editor and you're an end user and if you're an end user you're just |
| 13:22 |
the end user so as a developer if i if i provide a solution that |
| 13:29 |
is maybe works for the end user but it fails the content editor |
| 13:37 |
and it fails me as a developer because it's not a great solution for me to maintain then i've kind of |
| 13:44 |
failed two people um and maybe if it's |
| 13:50 |
you know it's easy for me but it's not a great solution for the |
| 13:56 |
end user and maybe it's an okay solution for the content editor i've still failed |
| 14:01 |
sort of more than one group and so um that's something i always think about |
| 14:06 |
when i'm creating solutions like how do you create a solution that sort of um minimizes the failure of |
| 14:13 |
a certain group you know as a developer i think that the onus is on us um to have the hardest job in a sense |
| 14:20 |
you want your end users to have the easiest job get what they need and then second you want your content |
| 14:25 |
editors to have the ability to manage and update those things without |
| 14:30 |
having any technical knowledge and so uh that's how i approach every solution you know |
| 14:37 |
you i gotta interject here for a second because i'm noticing a pattern with you and you know |
| 14:42 |
honestly this is worth the price of admission to this show right it's that you do something that |
| 14:49 |
is i mean really kind of unfortunately uncommon uh among developers or |
| 14:56 |
designers you seem to have empathy for each user |
| 15:01 |
of whatever it is that you're developing and um that that's that's a great way to |
| 15:08 |
approach it like you know when you when you're looking at a problem like this it's so easy for a developer to slip into the |
| 15:14 |
developer mindset of oh i can just go into page settings i can drop in those meta tags right in |
| 15:20 |
there because i know exactly what i need but not even thinking about how somebody's going to maintain that or how |
| 15:26 |
they're going to train someone else to to do that that is not a developer and doesn't even understand |
| 15:32 |
what that is so i appreciate that i applaud that um so yeah sorry i had to point that out know yeah |
| 15:39 |
no thanks a lot and to be honest with you it's not an i wouldn't even say it's an unselfish |
| 15:45 |
approach because i'm really just trying to make my own job easier and i know that if i make |
| 15:50 |
everyone else's job easier it makes my job easier that's a great perspective i like that |
| 15:57 |
because i always find that you know if you if you here's here's the real scenario of what would happen you would tell people go to |
| 16:03 |
the page headaire tags and then they go okay how do i manage html meta tags and then you have to |
| 16:08 |
train them on that and then they break it yeah and then they apply it to 20 pages |
| 16:13 |
now you have to fix it so why not create a solution that works for the end user works for the |
| 16:19 |
content editor and ultimately works for you um okay you burst in my bubble so you |
| 16:25 |
know it is a little bit selfish isn't it |
| 16:30 |
that's right no it's good it's good for everybody yeah so uh maybe without further ado |
| 16:37 |
maybe i can share uh my solution i built two sexy content yeah sure go ahead and share your screen |
| 16:43 |
and i'll i'll swap it over here for us okay here we go |
| 16:57 |
okay excellent your own okay so basically using that kind of |
| 17:04 |
thinking like how do i get open graph tags on the page consistently |
| 17:09 |
how do i allow editors to manage it and then how do i do it |
| 17:16 |
from a technical level um sort of taking that approach came to realization obviously too sexy |
| 17:23 |
content is a very good solution for that um so i'm just going to drop on the solution of the page so |
| 17:28 |
this is just a page i created for for actually my session um so this is just imagine it's a team page |
| 17:35 |
um so i'm just going to add a module it's a good looking page man so when you said for your session you're |
| 17:40 |
talking about for dinner in summit 2021 that's right yeah that's great this |
| 17:46 |
was the final the final page yeah if anybody wants to check that out i think uh if they |
| 17:51 |
paid for a mission they should have links and your videos should be out there i think for them to take a look at that |
| 17:59 |
yeah okay so i'm just going to drop the module on the page and then i |
| 18:05 |
created this module called open graph so i'll just kind of show you the final solution final product |
| 18:13 |
um and i'll explain how this works so i've just dropped this module i |
| 18:18 |
created called open graph on the page and it's very big right now this is just |
| 18:24 |
the way i designed it for now you could make this a lot smaller if you wanted to but um so i'm actually |
| 18:30 |
just i'm the logged in user so it's saying hey you know this is a hidden open graph |
| 18:35 |
card so if you're seeing this it's because you're logged in with an administrator account and you can edit this |
| 18:41 |
don't worry regular users won't see this card it's just for us to modify the open graph so that when you share this page on twitter and |
| 18:47 |
facebook the links will appear in a nice card style this is not representative of a real twitter or facebook card but it's just |
| 18:53 |
to give you an idea of what might appear you should always check these two links before posting |
| 18:58 |
and it also tells you the description comes from the page settings description so modify that field to |
| 19:03 |
change the content keep in mind that this should be less than 200 characters i put in a lot of content here just |
| 19:10 |
because i wanted to not only give users an area to edit but also to kind of |
| 19:16 |
give them a sense of safety if like you know you're seeing this but no one else is but it is working if you see this on the |
| 19:22 |
page basically so this is cool you've got you've built kind of like a preview of what it you know basically will look |
| 19:29 |
like uh you know obviously out of context here but yeah but it looks |
| 19:35 |
roughly what it's going to show on facebook and twitter right yeah exactly so originally when i built |
| 19:42 |
this all i had was it just put the open graph tags on the page and allowed them to edit it |
| 19:48 |
but i kind of started to think like well why not give them a preview even if it's not the super accurate one |
| 19:55 |
just to give them an idea of what they're building because that's the thing about open graph and sharing links just |
| 20:01 |
the nature of it is that you don't really know what it's going to look like until you share it right so i don't i wanted to avoid |
| 20:08 |
having my content editors try to put it in twitter and then realize that it you know it doesn't work |
| 20:16 |
and then they have to delete it and have to go back to t
RELATED VIDEOS
How To Approach Development With A Design First, Critical UI/UX Mindset
Aug 28, 2020
Today DNN Dave is joined by Aaron Lopez of WOLF X MACHINA (https://wolfxmachina.com/) to talk about how to approach development "the right way". What is "Design First"? Bring critical UI/UX thinking to your development strategy and drastically improve your resulting work products.
|