تسجيل الدخول

طلب

الموضوع في 'ركن طلبات المنتديات' بواسطة cuz, بتاريخ ‏09-11-2015.

حالة الموضوع:
مغلق
  1. cuz

    cuz :: عضو جديد ::

    إنضم إلينا في:
    ‏27-06-2015
    المشاركات:
    21
    الإعجابات المتلقاة:
    1
    الإقامة:
    الرياض
  2. أفضل إجابة:
    مشاركة #2 بواسطة Turkialawlqy, ‏09-11-2015
  3. Turkialawlqy

    Turkialawlqy xDeveloper

    إنضم إلينا في:
    ‏01-02-2012
    المشاركات:
    1,839
    الإعجابات المتلقاة:
    1,335
    الجنس:
    ذكر
    الإقامة:
    شبوة
    أفضل إجابة
    As the title suggests, this guide will hopefully explain what responsive design is, how to activate it and how to manipulate CSS.


    What is Responsive Design and how do I activate it?
    Responsive design is a setting which applies to each style individually and it dynamically changes the layout and design based on the browser width. This is achieved using conditional statements, media queries and custom CSS.

    It is set in the ACP -> My Style -> Style Properties -> Responsive Design: Enable responsive design.
    To enable it the box must be checked, like so:

    upload_2013-8-9_17-8-18.png

    Once checked, the style is responsive and will automatically adjust based on the browser width.
    Note that this applies to all devices and browsers, not just mobile devices. Even desktop browsers will see the changes as the browser window is manually reduced or increased in width.

    If you have a customised style and responsive design is not working after enabling it, check the following elements of Style Properties
    • General -> HTML - ensure there is no min-width specified in the Miscellaneous field; if there is, remove it
    • General -> Page Width Controller - ensure there is no min-width or width specified in the Miscellaneous fields; if there is, change it to max-width

    The other elements in the screenshot above are the trigger points: wide, medium and narrow. These are explained below.

    The final setting is the minimum page width for styles which aren't responsive or for any templates (pages) which have had the responsive design deactivated.


    What are the Max Responsive Widths?
    These are trigger points in pixels which are used to apply different CSS based on the browser width.
    The default values have been chosen based on the default style and particular classes of device. You may need to adjust them to suit your custom style but make sure you take into account the classes of devices and test the changes at the various widths to ensure the results are as expected.

    These three values are also style properties, making it quick and easy to update any CSS utilising them.
    They can be called using: @maxResponsiveWideWidth, @maxResponsiveMediumWidth and @maxResponsiveNarrowWidth.


    What issues do I need to be aware of when using responsive design?
    Once you have made the decision to use responsive design, there are changes which may be required.

    The primary issue is related to advertisements.
    Advertisements usually have fixed widths and heights, so as the browser width is reduced the advertisements will no longer fit and will break out of the page causing scrollbars, or overlap other content.

    If you use a custom solution then you will need to adapt it to work with responsive design.

    If you are using a third party provider then you will need to contact them to see what solutions they have for responsive design. Google AdSense has several solutions which are detailed in this resource: Responsive AdSense
    Please direct any questions related to AdSense to the discussion thread associated with that resource.

    Note that using display:none to hide advertisements is usually against the ToS of most providers so should be avoided where possible.

    The other aspect of the design which may be an issue is the header area and logo.
    Although the logo will automatically reduce in size as the browser width is reduced, the header height does not, which may result in large spaces above and below the logo.
    There is an add-on which addresses this particular issue: Respollo

    There may be other elements of your site which also need attention.
    Page nodes for example; if you have added tables or other content which requires a minimum width, then you will need to address that.
    Likewise for add-ons - you will need to contact the developer to ensure they are compatible with responsive design or adapt them to suit.
    Customisations affecting templates, layout and functionality may also require changes.


    How can I stop individual pages from being responsive?
    You may want the benefits of responsive design but at the same time restrict it for certain pages.
    To do so add this to the top of the template:

    كود:
    <xen:container var="$noResponsive">1</xen:container>
    That will ensure that the page will not be responsive and will not reduce below the width defined in the ACP -> My Style -> Style Properties -> Responsive Design: Non-Responsive Minimum Width.


    How do I change the CSS for responsive styles?
    Although it's not always required, it is good practice to wrap any CSS in the responsive conditional statement, which is:

    كود:
    <xen:if is="@enableResponsive">
    CSS here
    </xen:if>
    That ensures the CSS will only be applied to styles with the responsive design enabled.


    Example 1
    Using the above we can now manipulate the CSS to make it behave differently when the style is responsive.
    Here's a simple example:

    كود:
    .MyContent {
    float: right;
    }
    
    <xen:if is="@enableResponsive">
        .MyContent {
        float: none;
        text-align: center;
        }
    </xen:if>
    In a non responsive style, anything using the MyContent class will be floated right.
    However, if the style is responsive, it won't be floated and will be center aligned.
    You can of course edit the CSS to suit.


    Example 2
    The next step is to further manipulate the CSS using media queries.
    Using media queries allows for different CSS to be applied based on the browser width.
    Here's another simple example expanding on the one above:

    كود:
    .MyContent {
    float: right;
    }
    
    <xen:if is="@enableResponsive">
        @media (max-width:800px) {
            .MyContent {
            float: none;
            text-align: center;
            }
        }
    </xen:if>
    As above, in a non responsive style, anything using the MyContent class will be floated right.
    However, if the style is responsive and the browser window is 800px wide or less, it won't be floated and will be center aligned.
    Conversely, a min-width could be specified which would mean it would only apply when the browser window is at least 800px wide.


    Example 3
    It is also possible to change the CSS for multiple widths.
    Here's an example using three different widths:

    كود:
    <xen:if is="@enableResponsive">
        @media (max-width:800px) {
            .MyContent {
            color: red;
            }
        }
    
        @media (max-width:610px) {
            .MyContent {
            color: green;
            }
        }
    
        @media (max-width:480px) {
            .MyContent {
            color: blue;
            }
        }
    </xen:if>
    In a responsive style, at browser widths between 611px and 800px the font colour will be red; at browser widths of 481px to 610px it will be green; at browser widths up to 480px, the font colour will be blue.


    Example 4
    The eagle eyed amongst you may have recognised the three different values used in example 3 from the screenshot earlier in the guide.
    Although absolute values can be used, they can be substituted with the three max width style properties, like so:

    كود:
    <xen:if is="@enableResponsive">
        @media (max-width:@maxResponsiveWideWidth) {
            .MyContent {
            color: red;
            }
        }
    
        @media (max-width:@maxResponsiveMediumWidth) {
            .MyContent {
            color: green;
            }
        }
    
        @media (max-width:@maxResponsiveNarrowWidth) {
            .MyContent {
            color: blue;
            }
        }
    </xen:if>
    The benefit of this is if the Style Property values are changed, any CSS using them will automatically use the new values, rather than having to be manually changed if they are using absolute values.


    Predefined CSS classes
    The following predefined CSS classes can be used, rather than having to create your own:

    كود:
    .visibleResponsiveFull
    
    .visibleResponsiveWide
    
    .visibleResponsiveMedium
    
    .visibleResponsiveNarrow
    
    .hiddenResponsiveFull
    
    .hiddenResponsiveWide
    
    .hiddenResponsiveMedium
    
    .hiddenResponsiveNarrow
    As the names suggest, they will either make content visible or hidden based on the width of the browser window and the various trigger points.
     
    أعجب بهذه المشاركة cuz
حالة الموضوع:
مغلق
جاري تحميل الصفحة...