ÃÛ¶¹ÊÓƵ

Transcript

Hi, all. Thanks for joining. We’ll get started then in the next couple of minutes here. Today’s session will be focused on building effective web pages in AMP sites. Layout and content structuring basics, led by Tash Chander Rana. We are going to wait just another minute for attendees to filter in, and then we’ll get started.

Okay, we’ll go ahead and get started. Hello, all. Good morning. Welcome and thank you for joining. Today’s session focused on building effective web pages and and sites, layout and content structuring basics. My name is Kaylie Martinez, and I work in ÃÛ¶¹ÊÓƵ’s ultimate success field engineering. Org. As a Customer success manager, where we focus on helping ÃÛ¶¹ÊÓƵ customers getting as much value as possible out of their ÃÛ¶¹ÊÓƵ solutions. I’m going to go ahead and kick off our session today. Just to note, this session is being recorded and a link to the recording will be sent out to everyone who registered this. This live webinar is a listen only format, but is very much intended to be interactive in that as we go through content in today’s session, please feel free to share any questions into the chat and the Q&A pod. Our team will answer you as soon as possible. Additionally, if there’s any questions that we don’t get to during the session, we will take note and follow up after. We’ll be set. We’ll be sharing out a survey at the end of this presentation that we’d love your participation in, just to help us shape our future webinar session. So I’m joined today by our presenter, Tash Chander Rana. He is a senior strategist with ÃÛ¶¹ÊÓƵ Ultimate Success, based in Los Angeles. Tash has spent the last three years working with our ATM customers to help them deepen their product adoption and realize value from their ÃÛ¶¹ÊÓƵ investment. Tash enjoys working with customers to understand their use cases and identifying ways to support them via ÃÛ¶¹ÊÓƵ’s product capabilities. So now to get started, I will go ahead and turn things over to Tash.

Thanks, Kaylee. Happy Friday and happy Valentine’s Day, everyone. Thanks so much for joining us. As Kelly mentioned, my name is Sean Rana and I’m excited to guide you through this webinar today. In my role at ÃÛ¶¹ÊÓƵ, I do like to focus on helping users leverage and to its fullest potential. And I’m pleased to be joined by my colleague today, Kaylee, who will be assisting us through the interface, through through this session. I’ll be kicking off her session with an introduction to am authoring, a pivotal part of creating effective web pages. As Kelly said, this session is being recorded, and we’ll share some contact information at the end. If we don’t get a chance to address any questions or if there’s anything else you want to ask us in terms of follow up. As we proceed through today’s content, feel free to jot down any questions you may have. We reserve some time at the end to address those questions. And any additional queries? We’ll also be sharing a survey Caitlin will prompt at the end. In the in the where the poll, I believe, or maybe even a link that’s going to be sent out. And we do appreciate any feedback you have on how to improve future sessions. So thank you again for joining. And, let’s get started.

There’s an overview of today’s agenda. We’ll begin with introduction to AMM authoring, including editable templates and the page editor. And we’ll go into an overview of core components. After that, we’ll move and move on to key content structuring principles. And then finally we’ll end with a quick introduction to responsive design. And so the main objective of today’s session is to familiarize you with some of the essential tools available to authors, when creating or modifying web pages. While we won’t be doing, a step by step instructional type of session today, I encourage you to explore the wealth of resources that are available on ÃÛ¶¹ÊÓƵ’s experience for detailed guidance. Instead, today we’ll we’ll concentrate on discussing some of the key points that’ll be beneficial to you in your role. As an author with an A and science.

So our first topic today, is going to be an introduction into AMP authoring. This should be a refresher for most people. And a good overview for those of you are not familiar with Eon sites or Aim authoring. I know our our audience today is largely going to be beginners or those who are just kind of getting their feet wet and getting some some experience with Aim insight. So I think this will be a good way to kind of highlight what the use cases are and how, how this is a valuable tool and sort of overview of what Aim authoring, is. Then we’ll tap into some editable templates, what they do and what and why they’re useful. So let’s dive into the world of and authoring right at its core, Aim authoring is about empowering you to create and manage your digital content efficiently. Whether you’re part of a marketing team, a web developer, a business stakeholder, and offers tools that cater to a wide range of needs. And so the primary goal of Aim authoring is to simplify the content creation process that allows you to focus on what matters most. Delivering engaging and effective content. This is achieved through user centric design that caters to both technical and non-technical users, ensuring everyone can contribute to the content creation and content management. Right. Moreover, and fosters collaboration across teams, ensuring consistency in content output by providing a unified, unified platform. And so it helps ensure that all digital content aligns with your business objectives and is ready for deployment across various digital platforms.

In addition, Aim is designed to be intuitive. It makes it easier for new users to navigate the platform, begin creating content with minimal training, and this aspect is particularly beneficial for teams that need to onboard new members quickly. Or I’ve just moved over to the tool from a previous tool, and allows them to start contributing contributing effectively from, from, from the start, and also supports a seamless editing experience. The interface is equipped with drag and drop functionality, inline editing, and easy access to assets, making the process updating or publishing content straightforward and efficient. The ease of use here is really, really critical for maintaining a dynamic and responsive web presence, right? And then finally, the platform’s integration with ÃÛ¶¹ÊÓƵ’s suite of tools enhances authoring experience by providing a broad range of resources and capabilities. This integration helps ensure that your content creation is not only effective, but also enriched with creative possibilities.

So editable templates is the first component or the first aspect we’re going to look into here. And it is. The templates are integral to the integral feature within and providing a flexible framework for managing web page designs. Right. So they serve as dynamic blueprints is the best way to think about them. Allowing authors to define and control structure, initial content, and component configurations directly within. And this approach is sought to contrast with static templates offering enhanced flexibility control. Editable templates are stored under the slash plan, which is a slash configuration directory, and then templates are foundational in separating template logic from content. The separation is vital for maintaining organized, efficient workflows and for enabling content authors to manage templates without without affecting existing pages. So let’s talk about structure right at the core editable templates. They are the structure. They define the layout of the page. This includes determining like placement of headers, footers, and main content areas. The structure acts as a skeleton, if you will, for your site, and dictates where content components will reside and ensure that your design is cohesive across all pages. And move on to initial content. Templates can include initial content which serve as pre-configured starting points.

Initial content might be considered or might consist of like a placeholder text, default images, or predefined component settings. It provides authors sort of a baseline design they can start with, and then it can be customized to meet specific requirements. Streamlining the page for creation process. And also a really important point to note is it ensures consistency in design elements. We’ll move on to some components as well. Components are the building blocks of editable templates. They include elements like text boxes or image placeholders. Even video players and components are designed to be flexible and customizable. Again, they allow authors to drag and drop into the template as needed. So this is a very modular approach and facilitates, the creation of complex page layouts without extensive technical knowledge. We want this to be user friendly and to have different members of our team, whether they’re technical or whether they’re marketing. To be able to quickly come in, learn how to process this and then be effective in their role and be able to to pump out content. Right. One of the standout features of the dynamic relationship with the pages derived from them. So there’s a connection that ensures that any structural changes made to the template are automatically propagated to all associated pages. So, for instance, if an author updates the header section within a template, this modification will be reflected across all pages that use that template.

This this is great for maintaining consistency, but also reducing the need for repetitive updates right across different different properties.

The templates also support decent policies and policies are help define the rules and settings for how components behave within the template, such as style options or content restrictions. By establishing policies, the author can ensure that components are used consistently across different pages and and most importantly, adhere to brand guidelines. Editable templates facilitate the reuse of design, patterns and components. Again, promote promoting efficiency is probably one of the biggest USBs here. And then the coherent user experience across your site. This is beneficial for larger organizations, for managing vast amounts of content and needing to maintain the brand experience. Right. So essentially, editable templates empower authors to create, manage, and update web page designs efficiently by providing a flexible, dynamic blueprint.

They enable organizations to maintain consistency, and to respond quickly to design changes. Editable templates are essential for anyone looking to leverage the full capability of a site, and they’re a very important tool in our toolkit.

All right, so why are editable templates useful? Templates are indispensable tools for modern web management. They offer a wide range of benefits, that make them a best practice. And so you’ll hear me mentioning ÃÛ¶¹ÊÓƵ best practices many times during our session today. It’s really important that we try to adhere to them wherever we can, to avoid any downstream effects, right? And so first and foremost, we, as we said, consistency and efficiency. Any structural changes made to a template are automatically applied, applied across all pages. They ensure a uniform look and feel throughout the site. This dynamic updating process eliminates the need for manual interventions. I always like to say when there’s manual intervention, there’s a lot more potential for error. We try to kind of avoid that or mitigate that risk by having this be, a repeated process and allowing teams to focus on more strategic tasks to a point to flexibility.

Templates support advanced policy configurations, which means an author can exert granular control over components such as rich text editor, image settings, etc. and this level of customization ensures that your site not only meets design standards, but also functions optimally across various devices and platforms.

The ease of use, which set point three here as intuitive user interface, makes it simple for authors, even those with limited technical expertise, to create and manage pages. This accessibility accelerates the content creation process and empowers teams to innovate without being bogged down or restricted. Due to technical barriers. Point for reusability. So reusability is another compelling reason to adopt editable templates. Once configured, templates can be reused across different projects and sites. Again, saving valuable time, right? We want to have our content supply chain, be as as efficient as possible. And want to ensure that the best practices are constantly applied. So this reuse not only streamlines operations, but it also fosters a cohesive brand experience across all digital touchpoints. And then lastly, templates are great for future proofing. So they’re continuously updated with the latest authoring features, ensuring that your site remains at the forefront of digital innovation. So and evolves. Right. And so do the capabilities of these templates as Am evolves. This is great for providing peace of mind that your investment will continue to deliver over time. And so, in summary and recap of this editable template section, templates offer a robust, flexible foundation for any and project, facilitating efficient, consistent, and innovative web development. The strategic advantages make them an essential component of any digital strategy. And they aimed at delivering exceptional user experiences as.

So moving on to our next topic. Right. Let’s talk about the AMP page editor, which is a vital tool for crafting and editing web pages with an amp. So the page editor stands out with its wizzy wig interface. What you see is what you get, right? Which makes it incredibly user friendly, especially for beginners. And so it allows you to design and modify web content directly on the page, and it provides you with immediate, immediate visual feedback. So the benefits of using this editor, the page editor are numerous. User friendliness is probably stands out at the top of that list. Ensures that even new web development can easily be navigated with its features and be utilized. Right? The editor supports efficiency by allowing direct interaction with page components. So it makes editing and updating seamless and quick. Flexibility is also another point I like to bring up when we talk about the, the page editor, especially with new users, the editor lets you manage page configurations and component settings, tailoring your content to meet any design requirement. Collaboration is enhanced with things like annotation features, allowing team members to leave comments directly on the page, ensuring everyone is aligned, and so the page editor essentially it’s responsive. It ensures your content looks great on any device, and it’s an indispensable tool for any content author, whether they’re more experienced or whether they’re just starting out.

So it’s important to adhere to ensure that you’re adhering to best practices when you’re creating or editing a page. So let’s start with the foundation, which would be planning right before you even open the page editor, take a moment to outline the structure of your content of your page. So this means thinking about hierarchy, thinking about the key message you want to convey, right? How do you best organize your content to engage your audience and to. By having a clear plan from the outset, you’ll find that your workflow becomes much more streamlined. This planning phase is crucial. It can reduce, the need for extensive revisions later. And so I always like to say, you know, prepare upfront instead of panic at the end. And so this saves you a lot of time in the long run. One of the most powerful tools at your disposal in Am is the use of templates. And again, as I mentioned earlier, think of templates as your blueprint, right. They ensure that every page you create maintains a consistent look and feel, which is vital for maintaining your brand integrity. Consistency not only enhances the visual appeal of your site, but it also reinforces your brand identity. So by starting with a well-defined template, you establish a strong foundation. And from there, as you continue to develop further into your site, you’ll maintain that uniformity across your pages. Now let’s discuss the organization of components within the side panel.

Efficient organization is quick. It sorry, efficient organization for quick access and seamless editing. Imagine having all your tools scattered randomly. It would be chaotic and time consuming to find what you need by keeping your components well organized. You can easily locate them and manipulate the elements that you’re trying to do or that you need to. Which, again, significantly speeds up the process. So this organization is not just about saving time, though. It also helps you focus and maintain a sort of flow, if you will. Allowing for a more, more enjoyable editing experience. So as you progress with your edits, it’s essential to regularly review or changes, right? The preview function is a critical step in the editing process. And so this allows you to see how your page will look once you push it to to go live right. And once it’s actually, pushed to production and push live, you can see how it looks in the preview, function across different devices. So in today’s world, we know it’s a multi-device world. You want to ensure your content is responsive and user friendly. It’s almost a non-negotiable today right. And so by frequently using the preview feature, be able to catch any issues and make necessary adjustments, ensuring that your page delivers an engaging experience to all users regardless of the platform they’re using. And so finally, for this page, let’s talk about collaboration, which is huge in content supply chain. Content creation is often a team effort and it’s effective communication. It’s effective communication is key to success to aims annotation feature is an excellent tool for fostering collaboration. With annotations, you can leave notes and feedback directly on the page, providing valuable context and suggestions for other team members. This feature not only enhances communication, but it also helps keep everyone on the same page quite literally, right? By using annotations, ensure that your team can work together more effectively. Making the editing process editing process smoother and more productive. And so just to recap on this page regarding, best practices planning your structure, leveraging templates, organizing your components, regular regularly, previewing changes, and collaborating through annotations, you can significantly enhance your efficiency and the quality of content in the AMP page editor.

I would say these practices are not just guidelines. They’re actually essential strategies for achieving excellence in your web content and improving your creation process. Experience.

And so here are some key functionalities. I’m not going to spend a ton of time on here. I think we have a pretty good understanding, of what the page editor does. I just wanted to bring up some of the more commonly use ones and a quick sort of, overview of what they do. So intuitive drag drop interface allows you to effortlessly add and rearrange components on your page. This feature makes content creation both quick and flexible. Responsive design tools such as layout mode ensures, your pages look great on any device and provide an optimal user experience. This adaptability is crucial in today’s multi-device world. As we mentioned earlier, the comprehensive toolbar. This is one of one of my personal favorites, and it allows you to manage page modes, access settings, and more. And it’s all from one convenient location, right? The centralization, of tools enhances your efficiency as you work on projects. And additionally, the asset and component browsers in the side panel provide quick and easy access to resources you need. Functionality streamlines the process of enhancing your page with the right elements. By making sure you have everything you need at your fingertips. By leveraging these key functionalities, you can maximize the effectiveness of your content creation process within the page editor. And this is whether you’re crafting a simple, let’s say, landing page or a complex, multi-layered site. These tools will help you deliver, engaging and high quality web experiences.

All right, so now that we have an understanding of what the page editor is and how it works, let’s move on to core components. Any insights? And so at their core core components are designed to simplify the development process by providing a robust framework, if you will, that can be readily utilized across various projects. The framework is built upon ÃÛ¶¹ÊÓƵ’s best practices, ensuring high quality, reliable components that are ready to use. This means developers and authors can focus more on creating the content right, rather than spending time on the basics of web development.

The versatility of core components is one of their greatest strengths. I believe they can be used right out of the box for quick page authoring, which is perfect for projects that need to get up and running swiftly. However, if a project requires more specific functionality or even, let’s say, custom branding elements, these components can be tailored and extended, to meet those unique needs. So the flexibility allows teams to adapt quickly to changing project requirements, without having to go back and start from scratch. Right. So again, we’re looking at saving time and resources. Accessibility and SEO are critical considerations in today’s digital landscape. And so core components have been designed with these in mind. Accessibility ensures that all users, including those with disabilities, can access and engage your content without any barriers. So this aspect of design, it’s not only best practice, but often a legal requirement in many regions. And so core components have been designed with that in mind. And they help ensure compliance by adhering to accessibility standards, for example, which enhances the overall user experience. And expand your audience reach for SEO or search engine optimization, is equally important. And components are designed and created and structured in a way that supports SEO best practices, helping your content perform better in search engine rankings. So this structure is designed to improve visibility, making it easier for your target audience to find the content they need. By integrating these components, you’re not just creating a visually appealing website, but you’re creating one that’s strategically optimized to attract and retain visitors.

Responsiveness is another key feature of core components. As we know, users access websites from a myriad of devices, desktops, mobile phones, smartphones, tablets, etc. and so core components are inherently responsive, meaning they automatically adjust to provide consistent and optimal viewing experience across all devices. Right? The responsiveness not only enhances user satisfaction, but it also contributes positively to your SEO efforts. A search engines typically seem to favor, websites that are more mobile friendly.

Being part of an open source project, core components offer transparency and flexibility. So this open source nature, it allows developers to understand exactly how these components are built, and provides opportunity to customize them. Right. Open source community at a around and is really vibrant and very supportive. You’ll find they offer a wealth of resources and shared knowledge that can be invaluable, especially when you’re tackling complex, development challenges. And this community aspect ensures that you’re never alone in your development journey.

From a cost and efficiency standpoint. I would say core components are a game changer by leveraging these pre-built elements. Development time is significantly reduced, which allows, which translates, I guess you’d say, to an overall reduced and lower project cost. This efficiency allows teams to allocate more resources towards strategic initiatives, things that help drive business value rather than getting bogged down in the minutia of development. Reduction in time and cost also means faster time to market. And so improved content velocity, which is crucial, especially in today’s fast paced digital environment. And so at a high level, for components are a valuable asset and a insights. They streamline, the, the development process, but they also enhance the quality of your web content, and ensure that your site is accessible, responsive and really important, optimized for SEO. And so this makes them a smart choice for any web project. And and because they provide a solid foundation that can be built upon to create digital experiences.

So let’s focus on some key features, of core components and and sites that make them invaluable for web development. I’m gonna have a quick sip of water here.

All right. So firstly let’s start off with modular design. Each component is crafted as a modular unit, meaning it performs a specific function on your site.

This development allows for flexibility and scalability, and makes it easy to adapt as your site evolves, right? Reusability is another significant advantage. And you’ll see this across. And even when things like content fragments experience fragments. We know there’s a big theme, or a big undertone of reusability. And so core components can be used across multiple pages and projects, ensuring a consistent look and feel while saving development time. Each component is self-contained, which simplifies both management and deployment. Customization is also a strong point. These components allow for a configurable behavior and appearance.

I would just say they enable authors to adjust them directly through the user interface and then meet specific needs. The adaptability is crucial for tailoring components to fit diverse project requirements. It’s important to note, especially for those technical users who may, watch the recording or be on the call. Today, core components are developed with HTML Template Language or HTL. And so core components maintain a clean separation between content, logic and presentation. And what this means is this promotes best coding practices and ensures, maintainability of your code base.

For one instance, we could talk about a title content. And title component is a perfect for creating consistent headings and subheadings. And it’s modular nature makes it easily reusable and customizable. Right. The example here on the bottom for a title component, when we think about use case, I always like to refer to a blog post heading. So imagine you’re creating a blog section for your site and you want to use em, and you want each blog post to have a distinct title that stands out and is easily recognizable by users and by search engines. And so the title component is perfect for this job. What allow you to do is create headings and subheadings with different levels. Let’s use, for example h1, H2, h3, etc… And these are essential for structuring your content logically by using the title component.

You ensure that your blog post titles are consistent in style and formatting. And so this aids in both readability and also, search engine optimization. Right. Authors can easily change the title, text and style directly within and making it simple to maintain consistency. And the next example I have on this site here of a core component, it would be the text component, which offers rich text editing capabilities enabling extensive text formatting. And so use case here would be product descriptions. So consider a scenario where you need to, detail product descriptions to your an e-commerce site for example. The text component is your ideal component for this purpose. It provides rich text editing capabilities, allowing you to format and style the text so you can include bullet points, links, and even images if you require. This component enables you to present product information in a clear and engaging manner, making it easy for customers to understand the features and benefits of each product. And again, authors can quickly update or edit descriptions as product details change. And so you ensure that your site remains current and informative. So again core components stand out for their their modularity, reusability and flexibility. And I would like to say there are a, essential tool in the amp toolkit.

All right. So now let’s take a look at our next section here. Next section of this this session today, let’s think about, structuring content in ÃÛ¶¹ÊÓƵ Experience Manager sites. Right. Think of structuring doc structuring content or content structuring as the backbone of websites. Of our sites that we’re going to be building or editing. It helps keep everything organized, accessible, and visually cohesive. A well-structured site not only makes it easier for users to find what they need, but it also makes the management and simplifies the management for us, right? The the authors and those who manage these sites that we can begin by considering user experience. Imagine visiting a site where you can find what you’re looking for. It’s frustrating right? And so well-structured site eliminates this frustration by ensuring that users can navigate seamlessly. Discover content easily.

The focus on logical hierarchies and smart, strategies for metadata and layout ensures our content remains flexible, scalable, and ready to adapt as we grow to beyond enhancing user satisfaction. Effective content structuring also improves searchability, by organizing content logically. We make it easier for search engines to index our pages, which helps users find our content, both on our site and through external search engines like Google. For example. Right. The last point consistency across pages is another key benefit. A uniform structure reinforces brand identity, ensuring that every page maintains a cohesive look and feel. This consistency reassures users and strengthens the perception of our brand.

And as we dive deeper into these principles, you want to remember that they help us build effective and user friendly digital experiences. And these strategies are crucial for keeping up, our content, for keeping it relevant and make it easier to manage across different platforms.

Now let’s take a look into the key principles of content structuring and and sites. Again, these principles are what I say would help form the backbone of effective content management. And so firstly let’s look at We have logical hierarchy right. So think of your content like a well-organized library. This involves arranging content in a tree like structure and grouping related pieces together. So clear descriptive titles are crucial here. They help us understand the relationship between different pieces of content and navigate intuitively from one section to to another.

Next we utilize the power of templates and components, which we touched on earlier today, and offers these tools to ensure our site maintains a consistent look and feel. Templates provide a standard structure for pages, while reusable components can be applied across different sections. And both of these work together, and they speed up the creation process and ensure a design consistency. Moving down to our third box in the bottom left here, metadata utilization is another critical principle. So by applying metadata we categorize and tag our content. This is not only to organize it efficiently, but it also again enhances searchability which is so so important in this day and age. And so good metadata practices provide search engines with detailed information about our pages. Again with the end goal of improving search rankings and visibility. Lastly, we want to consider scalability and flexibility in our own design. And so scalability means our site can handle an increase in content volume without losing structure, integrity, or usability. Right. Our flexibility in terms our layouts can adapt to different screen sizes and devices. Again, super, super important in today’s day and age.

Now let’s explore, the impact and effective content structuring, on our AMP sites and how these practices can shape not only our current digital presence, but also have a downstream impact on our future capabilities.

So first, let’s discuss easier content management. Effective structuring streamlines the entire process of updating and maintaining content. So imagine having a clear map of where every piece of content resides, and then also how it connects to other elements within a site. Having this clarity is going to significantly reduce the time and effort required to make updates. And so allowing our content teams to operate more efficiently is so important, especially in terms of cost savings, and content, velocity. So with reduced workload, I always like to say it allows our team to focus on strategic initiatives rather than getting bogged down by day to day management tasks. So this shift frees up resources from creating, from creative and innovative work, enabling us to explore new content ideas and engage our audience in fresh ways. This streamline approach and not only boost team morale, but also enhances the overall productivity of our teams.

So moving on to performance. A well-structured site optimizes load times, which is again crucial in this in today’s digital environment. So there’s actually been studies that show even one second delay in page load time can lead to significant drops in user satisfaction. Bounce rates and also conversion rates can drop. By reducing clutter and optimizing content delivery, we provide a smoother user experience keeping our audience engaged, and willing to explore more of what we have to offer. Right. We’re building this for our customers. We’re building this for our users who spend time here. We want to make sure the process is enjoyable, and that encourages them to spend more time across our digital properties.

And enhanced navigation is another benefit of effective structuring. So when users can intuitively find their way around a site, it’s not only going to improve their experience, but also increases the likelihood that they will stay longer and and explore more content. This intuitive navigation leads to higher user satisfaction, retention rates, and they directly impact our site success and also our brand reputation. Right. And the last section here on this slide is let’s talk about future proofing. So a well-structured site is not just about meeting today’s needs. It’s about preparing for tomorrow’s challenges. And so as our content grows or shifts towards new platforms, having a solid structure in place ensures that we can adapt without major overhauls, which can be very costly, very ineffective in times of utilizing our time. And also just really poor for employee and team morale.

So this adaptability is crucial, since the digital world is constantly evolving. Supporting growth. This means our site can handle increasing volumes of content without becoming, unwieldy. So whether we’re adding new content types or expanding into new markets, integrating with emerging technologies. This scalable structure really helps keeps a keep us agile and responsive. And so this flexibility ensures that our site remains relevant and effective across various platforms and devices.

Accommodating the diverse ways that people engage with our content. Right. So furthermore, preparing for, emerging digital challenges means anticipating changes in behavior, changes in technology and market demands. And so the flexibility this foundation of a flexible foundation here, we’ve put our site to incorporate new features, embrace innovative content delivery methods, and meet evolving user expectations. On the flip side, by neglecting these structuring principles, they can lead to significant downsides. So a disorganized site confuses users, leads to frustration, and actually results in disengagement. And this can lead to higher bounce rate and lower conversion rates, directly impacting our goals and potentially harming our brand’s credibility. Production hamper search engine optimization without clear and logical structure. Search engine struggle. Google specifically to index our content effectively. And this makes it harder for us to find potential new users. And obviously can result in a reduction in visibility and our competitive edge within the digital marketplace. So without a clear structure, content management becomes cumbersome and time consuming. It diverts resources from, again from strategic initiatives and innovation. And this lack of consistency can also weaken our brand image as users encounter inconsistent experience in different sections of a site. This is the fastest way to erode trust and to lose engagement from our site visitors. So you can see that by embracing these content structuring principles, not only optimizing and not only optimizes our site for immediate benefits, but it positions positions us for long term success in this competitive digital landscape. And so by investing in solid content structure up front, and doing that today, we’re paying we’re paving the way for sustainable growth, and continued relevance in the future.

So for our last topic during this session today, let’s explore the crucial concept of responsive design, which is a cornerstone of modern web development. And so responsive design is all about flexibility, right? It’s a methodology that allows your website to automatically adapt to different screen sizes and devices. Whether users access your site from a desktop, a tablet, a smartphone, responsive design ensures they have a consistent experience. And this adaptability is achieved through techniques and am such as flexible grids, layouts, images at scale, and CSS media queries. So now you ask yourself why is this important? And I wanted to highlight some of the key benefits. Right. So first responsive design guarantees a consistent user experience. So when your website looks and functions well in any device it enhances user satisfaction. So if you will imagine visiting a site on your phone and struggling to navigate because it’s not optimized for mobile. That frustration can lead to a negative impression of the brand responsive design within the app. It prevents this by ensuring content is easily accessible and visually appealing. Regardless of what device, your your visitor is using. Secondly, responsive design plays a significant role in improving SEO. We talk about SEO a lot. It’s one of the core elements within, and it’s always we always hear everyone say, what’s the point of building if no one’s going to find it, right? And so search engines particularly again Google, they give a preference to mobile friendly websites. So by embracing responsive design you create a simple, cohesive website that adapts to all devices. Which makes it easier for search engines to crawl an index. Again, not only improving site visibility, but it’s ranking on search engines also improves. And finally, responsive design offers cost and time efficiency. When we talk about impact metrics, if you’ve engaged with the Ultimate Success team, you’ll hear us talking about quantifiable impact metrics. And we finally, largely, sort of living in the realm of cost and time efficiency. And so in the past, businesses often needed to separate versions of the websites for different devices. This approach was both time consuming and costly. With responsive design, you developed one adaptable website, significantly reducing the resources needed for development and maintenance, and you did updates and changes and they’re made in one place and automatically reflect across all device versions. And so, in a nutshell, or at a high level, responsive design is essential for delivering consistent user experience boosting SEO for your site and really huge for saving, cost in terms of manpower, admin hours. It’s as you build and refine your web pages in an, it’s important to incorporate responsive design principles will not only enhance the functionality and accessibility your site, but will help you reach a wider audience to engage.

And so what I wanted to do here is explore some powerful features with an amp, to facilitate responsive design and, discuss how these functionalities address common use cases in web development. Right. And so I was going to say let’s start with editable templates. Allows you to create templates that are not only flexible. So we talked about editable templates earlier. And I wanted to kind of map that back to responsive design and see how they they sort of go hand in hand. And so these templates leverage responsive design principles to automatically adjust layouts for different devices. So for instance you can design a template once and it will adapt to any screen. And now we’re talking about the specific template right. So the template that going to be reusing here. The template itself can be designed once and will adapt to any screen size. And this ensures the consistent user experience. This feature is particularly useful for teams working on large scale websites, where maintaining design consistency can be a bit of an issue or can be cumbersome.

And so this is critical for having a design consistency across different pages and devices. Next, a responsive grid layout. This simplifies the creation of fluid adaptive page structures. And so by using the responsive grid, you can easily arrange content components in a way that automatically adjusts to fit any screen size. And so this means you create a visually appealing and functional layout that remains intact, whether it’s viewed on a smartphone, tablet, or a desktop. This functionality addresses the need for scalable design that caters to a diverse audience, accessing content through various devices.

Moving on. Let’s talk about AMP. Image transitions. So image renditions are indispensable, and they’re really good at optimizing visual content delivery. So with a Am renditions and can automatically generate and serve the correct image size for each device. So this ensures your images load quickly without compromising quality, and enhance the user experience. So this feature is particularly beneficial in an era where media rich content is prevalent here, right? And page load times have a significant impact on user engagement and search rankings. We’ve all been there. We’ve all tried to load, a site on our on our cell phone. Images don’t load. We feel like we’re not getting the full experience we often check. Is there a connectivity? What is causing this issue is just a really frustrating user experience. And so image renditions really helps address that and ensure that we don’t end up in that category. Another key feature is the ability to set customizable breakpoints. And so breakpoints allow you to define specific device widths, with your layout or, design elements should change. So this gives the user or the author here, full control over how your content is presented on these different devices, ensuring that it remains accessible and visually cohesive. So customizable breakpoints are essential for creating adaptive designs that respond effectively to the wide range of screen sizes available today. It’s a really huge part and a really huge portion. Within, responsive design functionality built into a and so by utilizing the features on this page, you can create websites that are not only visually appealing, but also highly functional across multiple devices. And they provide a solution to common challenges in web development, such as design consistency, optimizing media delivery, and ensuring usability across diverse platforms.

All right. As we conclude our session today, I wanted to recap. This is our last slide. I wanted to sort of recap and revisit the points we’ve covered today. As I mentioned at the beginning, this is not an how to literally walk you through like a desk side coaching activity, but I wanted to kind of highlight the basics and these essential tools that are at your disposal and really highlight the value of of why they’re, they’re useful. So, let’s revisit the key points we covered today. So we started, with understanding an offering where we discussed mastering the basics of creating and managing content in an, for beginners, getting acquainted with an authoring environment is essential to streamline your workflow and make the most of its powerful features. Then we moved on to core components and how they utilize the AMS core components provide the building blocks for creating consistent and functional web pages. These components save time and ensure that your design, remains cohesive across different sections of your site.

Then we went on to our session or our section rather about content structuring principles. We emphasize the importance of well-organized content. By implementing structured content strategies. You can improve the usability of your website, making it easier for users to navigate. And for you to maintain. We then introduced the concept of responsive design, highlighting its importance in today’s multi-device world. The responsive design principles ensure that your web page looks and function well on any device, providing a seamless user experience. Following this, we discuss responsive design benefits in and using AMS responsive features. You can create flexible and adaptable web designs that cater to various audiences and devices, ensuring accessibility and engagement. And then finally, we focused on user experience enhancement and by by prioritizing user centric designs, you can increase user engagement satisfaction. This is a thoughtful design approach, and it leads to better interactions and a more enjoyable experience on your website, for your audience. Thank you for participating in today’s webinar. I hope you found these insights valuable. As you begin or continue your journey in creative, effective web pages, with an Am sites. If you have any questions, or need any further assistance, you’ll see my email address and Kelly’s email address on the next page. And with that, I’ll give it over to Kelly to close out.

Alright. Thank you all so much. I just launched, quick poll to get your feedback to help us shape our future sessions. But thank you again for taking the time to join the session today. We hope to have your company on, future webinars again. So thanks again and have a great day.