• Internet
• 21.02.2018
• EN

Simply RedDot: "List versus Container Best Practices"

written by Jian Huang, 8. May 2013
 

There has been many confusions over when to use a list element or a container element. For Example, I want to have a slider module on my home page.

The flexslider has the following HTML code:

<div class="flexslider" id="myflexslider">
    <ul class="slides">
        <li>
            <img src="slide1.jpg" />
        </li>
        <li>
            <img src="slide2.jpg" />
        </li>
        <li>
            <img src="slide3.jpg" />
        </li>
        <li>
            <img src="slide4.jpg" />
        </li>
    </ul>
</div>
<script type="text/javascript" charset="utf-8">
    $('#myflexslider').flexslider();
</script>

The Bad Solution

Each slide is a page containing a slide image. Then a list placeholder is used to pull in images.

<!-- flexslider content class -->
<!IoRangeRedDotMode>
<div class="alert-reddot <!IoRangeNoEditMode>alert-error<!/IoRangeNoEditMode><!IoRangeRedDotEditOnly>alert-success<!/IoRangeRedDotEditOnly>">
    <div><!IoRedDotOpenPage> [<!IoRangeNoEditMode>Open to Edit<!/IoRangeNoEditMode><!IoRangeRedDotEditOnly>Close to Save<!/IoRangeRedDotEditOnly> Page]</div>
    <!IoRangeRedDotEditOnly>
    <div><!IoRedDot_lst_slides> [Manage Slides]</div>
    <!/IoRangeRedDotEditOnly>
</div>
<!/IoRangeRedDotMode>
<div class="flexslider" id="myflexslider">
    <ul class="slides">
        <!IoRangeList>
        <li>
            <!-- <%lst_slides%> -->
            <!IoRedDot_img_slide><%img_slide%>
        </li>
        <!/IoRangeList>
    </ul>
</div>
<script type="text/javascript" charset="utf-8">
    $('#myflexslider').flexslider();
</script>

This is a sub-optimal method because

1. The slider pages will get published out as these useless HTML snippet pages, occupying space and unnecessarily indexed. Of course, one can prevent it by setting the template of the content class not to publish or use a content class without template. Nevertheless, it causes more work.
2. After editing a slider page in SmartEdit, user can't submit or release the slider page because it is hidden behind a list. Of course, one can make the slider page hidden behind the list accessible in SmartEdit. Nevertheless, it causes more work.

The Current Best Practice Solution

Each slide is a page containing a slide image. Then a container placeholder is used to contain the pages.

<!-- flexslider content class -->
<!IoRangeRedDotMode>
<div class="alert-reddot <!IoRangeNoEditMode>alert-error<!/IoRangeNoEditMode><!IoRangeRedDotEditOnly>alert-success<!/IoRangeRedDotEditOnly>">
    <div><!IoRedDotOpenPage> [<!IoRangeNoEditMode>Open to Edit<!/IoRangeNoEditMode><!IoRangeRedDotEditOnly>Close to Save<!/IoRangeRedDotEditOnly> Page]</div>
    <!IoRangeRedDotEditOnly>
    <div><!IoRedDot_con_slides> [Manage Slides]</div>
    <!/IoRangeRedDotEditOnly>
</div>
<!/IoRangeRedDotMode>
<div class="flexslider" id="myflexslider">
    <ul class="slides">
        <%con_slides%>
    </ul>
</div>
<script type="text/javascript" charset="utf-8">
    $('#myflexslider').flexslider();
</script>

<!-- flexslider slide content class -->
<li>
    <!IoRedDotOpenPage><!IoRedDot_img_slide><%img_slide%>
</li>

Source: List versus Container Best Practices

© copyright 2013 by Jian Huang