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:
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.
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:
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:
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:
