{"id":300,"date":"2023-06-02T16:02:11","date_gmt":"2023-06-02T16:02:11","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=300"},"modified":"2023-10-11T07:43:14","modified_gmt":"2023-10-11T07:43:14","slug":"ion-building","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/ion-building\/","title":{"rendered":"Ion Building Best Practices"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Best practices when building interactive experiences in Ion<\/h2>\n\n\n\n<p>For the best building experience in Ion&#8217;s Creative Studio, the following guidelines should be followed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dos<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Build in the platform, versus using custom Javascript or CSS.<\/li>\n\n\n\n<li>Use containers to organize content for similar sections.<\/li>\n\n\n\n<li>If you are going to have an element that is going to be used multiple times and in multiple places in the experience, build out one completely \u2013\u2013&nbsp;including animations \u2013\u2013&nbsp;and then copy it and update the content in the other instances.<\/li>\n\n\n\n<li>Use images that are 256 kb or smaller in size.<\/li>\n\n\n\n<li>Tag all actionable items, whether they be links, buttons, images, Reveals, containers, etc. Please see the <a href=\"https:\/\/help.rockcontent.com\/en\/why-tag-and-some-things-to-have-in-mind-when-doing-so\">examples found here<\/a>.<\/li>\n\n\n\n<li>Use one H1 tag per page<\/li>\n\n\n\n<li>Always aim to use micro-themes above any other styling. Especially in regards to background colors and colors.<\/li>\n\n\n\n<li>Minimal use of pixel sized elements. Always try to use \u201cem\u2019s\u201d<\/li>\n\n\n\n<li>Whenever possible, solve responsive design issues without hiding\/showing based on the viewport. Hiding and showing are less discoverable when building with multiple users. If this is done, it will need to be labeled in the Creative accordingly.\n<ul class=\"wp-block-list\">\n<li>Example: A button that is hidden in all viewports but XS should be labeled &#8216;Link XS&#8217;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>All show\/hide elements need to be labeled clearly and concisely. For example \u2018Form &#8211; Form Not Complete\u2019 and \u2018Thank You &#8211; Form Complete\u2019<\/li>\n\n\n\n<li>Use bottom margin on elements to create negative or white space between elements. If that is not possible, use top margin.<\/li>\n\n\n\n<li>Build one section at a time for all viewports and then move onto the next one.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Don&#8217;ts<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Avoid use of the \u2018Custom CSS Styles\u2019 within the Styles panel. Instead, create a new micro-theme or class at the creative-wide level.<\/li>\n\n\n\n<li>Do not use left or right margins on grid elements, ever.<\/li>\n\n\n\n<li>Do not manually resize or color text within the rich text editor.<\/li>\n\n\n\n<li>Do not manually break &lt;br \/&gt; lines or use hard returns to create space between elements or lines of text in responsive design.<\/li>\n\n\n\n<li>Label rules for discoverability. Do not leave rules labeled as \u2018Rule #87\u2019 instead &#8211; \u2018Question 8, Answer Blue\u2019 which is more descriptive<\/li>\n\n\n\n<li>Watch out for extra \/ unwanted &lt;p&gt; tags inserted by the rich text editor.<\/li>\n\n\n\n<li>Avoid using custom Javascript like Show\/Hide and scrollTo. Use platform components to achieve.<\/li>\n\n\n\n<li>Any CSS needed to style the page should live in the \u2018Page and Creative CSS\u2019 area or the theme. If it can be a micro-theme (like a width micro-theme to get 1\/5th columns), make it a micro-theme.<\/li>\n\n\n\n<li>Avoid having rows with null columns. In other words, the columns should fill the entire width of the row.<\/li>\n\n\n\n<li>Avoid having rows with empty columns. Unless the empty column has some purpose. For example, if you want to center a title and restrict it\u2019s width in order to have it wrap sooner, you can use empty columns on the left and right of the middle column it is in:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"399\" height=\"85\" loading=\"lazy\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/06\/image.png\" alt=\"\" class=\"wp-image-301\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/image.png 399w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/06\/image-300x64.png 300w\" sizes=\"auto, (max-width: 399px) 100vw, 399px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Best practices for building embedded creatives in Ion<\/h2>\n\n\n\n<p>The following guidelines should be followed when building creatives to be embedded experiences.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dos<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a container for use while designing that is the width (and height if available) of the embed dimensions. This will ensure your experience is designed for the dimensions properly.<\/li>\n\n\n\n<li>Use nested responsive grids<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Don&#8217;ts<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Anything that uses the height of the window to change or move. This includes:\n<ul class=\"wp-block-list\">\n<li>Sticky navigations<\/li>\n\n\n\n<li>On scroll animations<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Full page slider<\/li>\n\n\n\n<li>Fixed background images<\/li>\n\n\n\n<li>Parallax in background images<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Caution<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Be wary of the fact that nested responsive grids break differently than non-nested and viewports need to be checked carefully.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Best practices when building interactive experiences in Ion For the best building experience in Ion&#8217;s Creative Studio, the following guidelines should be followed. Dos Don&#8217;ts Best practices for building embedded creatives in Ion The [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":5129,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[1420,32],"tags":[2091,2131],"class_list":["post-300","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-creative-studio","category-the-creative-studio","tag-best-practices","tag-creative-studio"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/300","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=300"}],"version-history":[{"count":0,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/300\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5129"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}