Give your DNN 7 & Catalook E-Commerce Shop a Responsive Design
Channel: Salar Golestanian
Date: 2012-12-21

Smart Responsive Design that can render your site to all shapes of devices has now been around for a while. There are numerous blogs and discussions about the subjects on the web. With more and more people asking for ecommerce sites that are also good on smartphone devices, we thought to do some extra work and work with Catalook and our partners Excommerce to bring the Responsive solution to DNN 7 and Catalook.

http://storeintegrator.com/catalookdemo

This approach dictates that design and development of the site should be done in a way that the products can respond to the user's behaviour and environment based on their screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries and clever use of Java Script and JQuery. The problem is that this approach relies on the more advanced and modern browsers like Chrome, IE9 or later, FireFox, Opera and Safari. Older browsers can behave rather unexpectedly. But in general it is a small price to pay for opting to be in the forefront of technology and bringing your site up-to-date with current trends. One good thing is that on the smartphones all the browsers are advanced and can deal with responsive design.

In summary, whatever the end user is using to view the products - laptop, Android device, iPad etc... The products you are selling will automatically switch to accommodate for resolution, image size and scripting abilities of the device and browser it runs on with minimum effort. Therefore the site will be able to automatically respond to the user's preferences. This new approach eliminates the need to have dedicated micro sites for various devices and screen sizes. The result is that you can now reach the fast growing mobile device users and get them to purchase your products, on the train, at work or in a bar and anywhere that they have time to be indulgent.

I thought I should also be honest and give you some of the caveats of this approach. But in total, you will find that the pain of producing two site with one for desktops and one for smartphones far out-way the benefits of one site for your product approach.

Benefits

You will save time & money
Adapts to fit any shaped device
Advantage over Competition with Traditional shop
Your site will be relevant for longer
No need to create expensive Apps
The store module is refined to deal with all this for you

Caveats   

Navigation is not as easy as desktops 
Data tables should be added with care 
Old versions of IE the page is will not look great 
Longer testing time but still less than doing two sites
In addition to this, DNN has also ability to have a great splash page that allows you to create a very advanced animation when people first come to your store and then move them to the standard homepage. This approach was very popular around 2004-2008 using Flash and most fashion sites used this to wow their customers.  So now this can be done with HTML 5 type animation and we plan to show you this approach in the next few weeks.

About Salar: Salar's main business is at salaro.com & with team of 12, builds maintains software solutions based on Microsoft .net for both CMS and Ecommerce Platforms, DotnetNuke and nopCommerce. Forthe latest news you can visit the respective sites above. Salar's early academic years was doing Physics so he has a good understanding of the Science & Technology in particular Physics & Mathematics. The web world today, moves and progresses swiftly, so I hope to keep a continuous flow of work related information and ideas in my subsequent blogs or Salaro TV. Salar is also one of the founders of FinityAsset

Web: http://salaro.com
Product: http://dotnetnuke.co.uk
Blog: http://salargolestanian.com
SciFi: http://scifiwood.com
Other: http://finityasset.com