Web Content delivery today is not so easy as typical user may have a netbook, a laptop, a 27″ iMac, a 50 inch widescreen TV that may also act as a browser and of course the huge number of clever new smartphones entering the market and finally iPads or other tablets that have become so popular.
Also when I compare Google Analytic on some of our popular sites that are delivering content to regular end users in UK rather than software only based sites that has a more desktop oriented users. We notice the huge increase in desktop and mobile users in just one year. It is therefore, time to embrace the inevitable and go Responsive Design
See the examples below where you can see how the mobile devices now account almost the same as the total desktop page hits.
Therefore, since your content is now being viewed on more devices and browsers than ever before, we have to design it with that in mind. Websites that adapt to things like screen sizes and operating systems are known as responsive designs.
Responsive Web Design
We are running a site in UK that has a lot of really what we consider average users. Mostly they are not in IT and the site allows them to browse properties for sale or for rental. This is a fairly neutral site and check out the statistics below. There is no doubt that the mobile user’s numbers are much more than last year when I checked the same site.
Responsive web design has become a huge part of modern day web development. Having a page that adapts to fit the size and format of any device is paramount. Responsive site design ensures viewers can see your content the way you intend whether they are viewing on their mobile device or desktop computer.
http://dotnetnuke.co.uk
http://www.smashingmagazine.com/
http://css-tricks.com/
Cantered Logo and balanced menu
Another recent trend is to centre the banner area elements in a web design. This is a very effective way of creating visual balance. Centered designs can also make responsive design or tiled design easier Inspired by these two ideas we went about building centered design for DotNetNuke Web Content Management System.
CMS systems like DNN, WordPress Joomla and others are traditionally build with the old web 2.0 design practise ideas. Put the logo to the left, and left align the menu in a row horizontally or set it as a side menu. These approaches don’t suite modern Mobile centric designs.
http://dotnetnuke.co.uk/thinkdifferent
Releasing a New Think Different Design
This package has taken over 3 months to make as implementing the ideas within the boundaries set in a content management system like DotNetNuke has not been easy.
In every step of the way we had to introduce new tools to overcome the standard way of doing things in the environment. But at the end we are very delighted with what we have produced
Here is a short list of nice attributes to this
package.
- Centered logo
- Balanced menu in desktops and tablets
- Centred menu with drop down so the top of the page in a smartphone is not cluttered with a long list of menu items
- Cool uncluttered Search,login, Social networking icons that work with mouse over rather than a permanent real estate killer.
- Responsive Design
Think Different with Responsive Design for DNN will be available on Store.dotnetnuke.com from 14th of November. The DNN 7 version is to follow as soon as the DNN 7 is released.
|
Implementing Responsive Design Framework on your website is not only about adjusting screen resolutions – but also all the other media in your page including Images and Videos. We therefore need to look at the design in a new way.
|
Customizing your website is now as easy as 1-2-3!
Buy/Install our Template.
Install our template in your website
and add the content.
|
Add Customization Module.
Install our module and add to the page which you
want to customize the template.
|
Publish with just a click
Customize the template using module option and publish it.
|
Think Different with Responsive Design for DNN
The Responsive DNN fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.
Scrap 1024! Design once at Responsive DNN for 1280, and with very little extra work, it will adapt itself to work on just about any monitor size, and the fast growing mobile market.
Responsive DNN is using Telerik ajax menu for DNN, which proves that a simple DNN design CSS skinning is good to produce a pack that can apply to your DNN site. This skin has only has a minimum number of Tables and uses Divs to ensure good cross browser compliance and make up a skin pack that is fast without compromising the portal capabilities. Great matching pack of Containers is also included.
| Unique Features |
 |
Easy Customization module
Easy customization gives you to change the colour of the theme even you don't have the deep knowledge of DotNetNuke skin. You don't need to edit the source code just installed the module and changed the colour. |
 |
DNN Responsive
The Responsive DNN fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Scrap 1024! Design once at Responsive DNN for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile. |
 |
Centered and Balanced Menu Style
Skin uses two menu at the top one at left and other one at right side. |
 |
Social Networking
Follow Us section also made it similar to the search section to look simple and attractive and uncluttered with hide and show approach. |
 |
Hide and Show Search
In this package search has been made like slide in and slide out to make the package looks simple and attractive. |
|
Standard Features
|
 |
Versatile Pane Layout.
We gives you the most various types of pane layout. It helps you to ensure the positioning of the sites content. |
 |
Browser Compatibililty
We've tested our themes to ensure they are compatible with all the modern web browsers like Chrome, Firefox, Safari,Internet Explorer9 and above also in ipad,
iphone and android mobiles. The older browsers will have the usual Responsive Design variation. Please check and ensure you undrestand the limitations |
 |
W3C Valid XHTML & CSS
The code in Think Different has been tested for W3C compliance.It helps your site SEO Friendly. Please note that the new Responsive Design is in perpetual beta with the @media that drives the solution is constantly being matured |
 |
Complete source code in HTML
Complete source code for all skin components.Skins are HTML rather than ASCX. This will allow you to do minor changes if you undrestand the DNN skinning technologies |
 |
Includes PSD
Package includes the PSD files of the designs. |
 |
DNN Compatibility
Skin has been tested in DNN 6x and compatible with 6x. We will also support DNN 7.x when it is released. |