As technology and innovation improved, smartphones became more powerful, affordable and common; it is no doubt that small screens (smartphones, tablets and laptops) have become your preference. In order to grow and gain more popularity for business, every client wants to create a mobile website. There are a few essential things: one design for the mobile devices, another for the tablets, and the design must work with all screen resolutions.
As a DNN Development Team with six years' experience, we (DNNGo) have found a workable solution to cater to the consistently developing browsers and internet devices-taking advantage of responsive design with HTML 5, CSS3 and Bootstrap technology to make your website work with various devices and screens.
What is Responsive Web Design?
Wikipedia defines Responsive Web Design (RWD) as “a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).”
No matter what screen resolution you are using, the page will fit the user’s screen resolution, image size and relevant scripts. In other words, the page has the ability to respond to a user’s device environment. Responsive web design allows the layout of a site to adapt to small and large screen devices in order to share the same code base and content without the need for separate website properties. This way, we don’t need to develop new versions for the changing devices.
Responsive design has been mentioned a lot since 2012; all kinds of Web responsive designs are getting more and more attention. The “make people forgot their device dimension” concept pushes responsive design development, which means Web design will come up with more responsive design elements: UIKit, Bootstrap, Adobe Edge Inspect, Foundation, SimpleGrid and Responsive Testing.
All the skins we have on the DNN Store are developed on Bootstrap, are able to work with various mobiles, tablets and PCs, and have great flexibility.
What is Bootstrap?
Bootstrap is a front end, open source tool for creating websites and web applications, it was developed by Mark Otto and Jacob Thornton at Twitter and is one of the best CSS frameworks for developing and designing content management systems. It has two versions-Bootstrap 2 and Bootstrap 3. Currently, the latest version is 3.0.
Below are some of our skins developed on Bootstrap 2:
Unlimited Responsive DNN Skin 033
Unlimited Responsive DNN Skin 036
Below are some of our skins developed on Bootstrap 3:
Unlimited Responsive DNN Skin 045
Unlimited Responsive DNN Skin 043
Unlimited Responsive DNN Skin 042
For more info on Bootstrap Grid system, please see links below:
Bootstrap 2:
http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem
Bootstrap 3:
http://getbootstrap.com/css/#grid
Some tricks on using responsive skin:
1. How to set images in HTML module to be responsive?
In Bootstrap 2, you don’t need to add any additional coding, the images are able to adapt the width of parent elements, since bootstrap 2 contains the following CSS code snippets:
img{
max-width:100%;
}
While in Bootstrap 3, it doesn’t include the code snippets above, you need to add additional .img-responsive class. Here is the code snippet:
<img src="..." class="img-responsive" alt="Responsive image">
2. How to make modules in various devices hide/display?
Not all modules can work with responsiveness; under this case, we need to hide the module in mobile device.
In Bootstrap, responsive class is included, and it is able to hide/display the content.
Below is a table of the available classes and their effect on a given media query layout (labeled by device).
Bootstrap 2:
bootstrap 3:
By taking advantage of these class, you will be able to hide the module in mobile devices very easily.
Log in to the site under admin role, click the Settings button in the upper right corner of the module, and find header and footer sections in Advanced Settings.
Add code <div class="hidden-phone"> in Header section. And add </div> in Footer section, just like below:
If you are using Boostrap 3 skin, you need to add code <div class="hidden-xs"> in Header section and add </div> in Footer section.
In the same manner, you can display this module in mobile devices, while hiding it in tablets and PCs.
3. How to use Bootstrap Grid system?
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Also we can use Bootstrap Grid system to create a responsive layout very easily.
For example:
We can add the following coding to HTML module.
Bootstrap 2:
<div class="row-fluid"> <div class="span4">...</div> <div class="span8">...</div> </div>
<div class="row-fluid"> <div class="span4">...</div> <div class="span4">...</div> <div class="span4">...</div> </div>
Bootstrap 3:
<div class="row"> <div class="col-sm-4">...</div> <div class="col-sm-8">...</div> </div>
<div class="row"> <div class="col-sm-4">...</div> <div class="col-sm-4">...</div> <div class="col-sm-4">...</div> </div>
Also we can create some additional pane layouts.
For example:
Bootstrap 2:
<div class="row-fluid">
<div class="span4">
<div class="Grid4_Pane1" id="Grid4_Pane1" runat="server"></div>
</div>
<div class="span8">
<div class="Grid8_Pane2" id="Grid8_Pane2" runat="server"></div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<div class="Grid4_Pane1" id="Grid4_Pane1" runat="server"></div>
</div>
<div class="span4">
<div class="Grid4_Pane2" id="Grid4_Pane2" runat="server"></div>
</div>
<div class="span4">
<div class="Grid4_Pane3" id="Grid4_Pane3" runat="server"></div>
</div>
</div>
Bootstrap 3:
<div class="row"> <div class="col-sm-4"> <div class="Grid4_Pane1" id="Grid4_Pane1" runat="server"></div> </div> <div class="col-sm-8"> <div class="Grid8_Pane2" id="Grid8_Pane2" runat="server"></div> </div> </div>
<div class="row"> <div class="col-sm-4"> <div class="Grid4_Pane1" id="Grid4_Pane1" runat="server"></div> </div> <div class="col-sm-4"> <div class="Grid4_Pane2" id="Grid4_Pane2" runat="server"></div> </div> <div class="col-sm-4"> <div class="Grid4_Pane3" id="Grid4_Pane3" runat="server"></div> </div> </div>
We hope you have found these tips useful. If you have any comments, questions or suggestions on responsive skin experience, please send feedback to us using the comments section below.
