Latest Think Different Skin with a Modern Responsive Design

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.

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. 

However to deal with all these new devices, OS and browsers, we have the following choices when it comes to building a website for a client.

Long Single Page Website 

I remember the days that everyone thought that the perfect page should be 800px wide and around 450 px high and there should be no scrolling. Those designs now belong to museums. It because android, iOS or Surface devices can deal with s vertical scrolling (assisted by mouse wheel), it has suddenly become fashionable again. Apple was probably one of the first to use this approach.

Heavy use of backgrounds

A picture speaks a thousand word has influenced fashion brands photographers and motion picture sites and these design approach are now being used in virtually all industries with great degree of success. Photo background approach is great for branding and presentational purposes – when your main objective is to make a strong visual statement. This is why it’s often used by fashion, clothing brands, travel industry and many others. Last week we released http://finityasset.com and had great reviews from the users.

http://www.davidia-int.hr/ 
http://swims.com
http://www.anderssonwise.com/
http://www.vml.com/

Tiled Missionary Design
Tilled Design or Missionary design brick-like grid which features blocks of solid colours or images coupled with blocks carrying photos or text. It appeals with users because of its simplicity. Contrast between blocks of solid colours and blocks with images / text creates strong visual interest, which usually stimulates users to explore more.

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
http://teixido.co/
http://www.oasis-stores.com
http://lab.4muladesign.com/dribbble/

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.

1. Centered logo
2. Balanced menu in desktops and tablets
3. Centred menu with drop down so the top of the page in a smartphone is not cluttered with a long list of menu items
4. Cool uncluttered Search,login, Social networking icons that work with mouse over rather than a permanent real estate killer.
5. Responsive Design

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.