DotNetNuclear
  • About
    • Contact
  • Products
    • Intensity Slider
    • MVP Template
    • Support
  • Learning

Thinking responsive when adding content to your DotNetNuke site
Article Rating

By  Scott Wilkinson

Posted Feb 06, 2013 00:33

Tweet

Comments 0

Introduction

I gave this talk at our last Chicago Area DNN User Group meeting on Feb 5.

Responsive design has been a big buzzword for the last several months. At this point, there are tons of responsive skins on the DNN Store. But don't fool yourself into thinking that buying a responsive skin is the end of making your site responsive. This article attempts to explain some basic responsive techniques and how to use them in your HTML content.


Responsive Implementation basics

Making content responsive can be done mainly with CSS techniques - namely using media queries. Typically, you will use media queries to override element styles to fit the particular screen size. I am going to show how I use CSS to override the placement, font size, and visibility of elements to achieve the look you want.

Let's start with a simple page design:

Typical non-responsive page layout

We have 5 divs: a wrapper, a full width top banner, left and right content, and a full width footer.

    
<html>
<body>
    <div class="MainPage">
        <div class="PaneWrap">
            <div class="PaneFullWidth">
                <h1>Banner</h1>
            </div>
            <div class="PaneLeft">
                <h1>Left Pane</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut quam sed risus vulputate placerat eleifend commodo sapien. Phasellus dolor ante, consequat nec malesuada ut, sagittis vel sapien. Nulla sit amet urna arcu, eu ultricies leo. Nam in est augue. Vivamus elementum, tortor in tristique eleifend, felis tortor pharetra quam, a ornare lorem nisi id magna. Phasellus risus neque, laoreet rutrum ultrices vitae, congue ut lorem. Etiam ac purus erat, vestibulum porta justo. </p>
            </div>
            <div class="PaneRight">
                <h1>Right Pane</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut quam sed risus vulputate placerat eleifend commodo sapien. Phasellus dolor ante, consequat nec malesuada ut, sagittis vel sapien. Nulla sit amet urna arcu, eu ultricies leo. Nam in est augue. Vivamus elementum, tortor in tristique eleifend, felis tortor pharetra quam, a ornare lorem nisi id magna. Phasellus risus neque, laoreet rutrum ultrices vitae, congue ut lorem. Etiam ac purus erat, vestibulum porta justo. </p>
            </div>
            <div class="PaneFullWidth">
                <h1>Footer</h1>
            </div>
        </div>
    </div>
    <style>
        .MainPage
        {
            width: 980px;
            margin: 0 auto;
        }
        .PaneWrap
        {
            width:100%;
        }
        .PaneLeft
        {
            float: left; width:49%;
        }
        .PaneRight
        {
            float: right; width:49%;
        }
        .PaneFullWidth
        {
            clear:left;
            border: 1px solid #aaa;
            text-align: center;
        }
    </style>
</body>
</html>

This is a typical page setup with a centered 980 pixel width page area and some left/right blocks for side-by-side content. The problem with this design is that it looks bad on a smaller screen such as a tablet or phone as you can see below.

non-responsive view on mobile

Adding media queries to make the view responsive

First, we are going to add a media query which overrides the page width from centered 980 pixels to 100% width.

 
        /* Screen is smaller than 980px */
        @media all and (max-width:980px)
        {
            .MainPage { width: 100%;}
        }

Next, we add a media query to override the position and font size of the left/right content containers. We don't want them to float and we increase the font. This will line them under each other.

 
        /* Screen is smaller than 480px */
        @media all and (max-width:480px)
        {
            .PaneLeft, .PaneRight
            {
                width: 100%; float: none; font-size: 1.3em;
            }
        }

And the result is much more readable:

responsive page layout

Using responsive techniques in HTML module

For a practical example, I had an issue with my intensity slider product page. I added an HTML module to the page and entered my content. Again, using side-by-side content, there were issues with the mobile rendering. Here is snippet of the page in the desktop browser:

responsive layout issues

After adding some media queries similar to the ones above, I enabled the side-by-side view to render much nicer on smaller formats.  Below shows the same content in a mobile browser before and after I added the CSS media queries:

non-responsive to responsive

Rate this


Post Comment

Name (required)

Email (required)

CAPTCHA image
Enter the code shown above:

0 Comments

There are currently no comments, be the first to post one.
25 Latest Articles Current Articles | Archives | Search
  • © 2018 DotNetNuclear LLC
  • Terms Of Use |
  • Privacy Statement |
  • Login
  • DNN Software
  • YouTube
  • Twitter
  • LinkedIn
  • Facebook
  • Stack Overflow