Yup, ’fraid so, yet another CSS framework - but this one’s different… It combines years of my best Developer tips, tricks and practices in one handy SkinPack for DotNetNuke 6.x. We have been developing mobile versions of the desktop skins we do for customers, but they used to find it difficult to maintain 2 version of their content even though for the last 3 years the out of the box DNN + mobile SkinPack with the help of our mobile re-direct module did do a good job of sending the mobile users to a separate child portal with mobile friendly content.

We were asked many time that why spend additional time developing a mobile version of our customer sites? Can we not build a single skin pack that can be viewed on any mobile device or any size screen! Also, why spend more $$$ on similar themes or even go and build a OS specific mobile App when it only makes it more expensive and harder to maintain content.

Of course his was always possible in DNN with basic fluid designs like the ones in our store at salaro.com which could also be used for the desktop - but the UI for desktop was not so good. It is way too minimalistic and lacks some of the modern web 2.0 design trends for menu or footer styles and therefore it was really designed for small smartphone screens. So a smarter responsive method was required to scales one's site to fit on:

iPad, or other tablet device (supports both portrait and landscape orientation)
iPhone or other smart phone device
Any size monitor

The latest trends in responsive web development is exciting to say the least but also numerous to chose from and difficult to integrate in DotNetNuke framework - However, it is ever more necessary because of the increases in Mobile device penetration around the globe. So for a while more and more of our customers asking the questions like, how can we can deliver our web content efficiently and cost effectively to all users regardless of the size of their device that they use to view the content? has a good answer.

In the last couple of years, we have been doing this with multiple versions of the site. For example a child portal that has shorter content just for smartphone and the main portal that manages the large screen PC, Laptop and Tablets. However, recently our focus is been on how we can deliver web content efficiently to the changing web world using Smart Responsive CSS Famework

Some facts:
Currently 90% of the world’s population owns a mobile device of some sort. Apple currently produces nearly 5 mobile devices per second which is more than the 4.5 babies born every second globally! it is easy to see how very quickly in the next couple of years most web surfers around the globe either have capable smartphone already or would be replacing their old phones with smart phones.

Mobile devices already have displaced many of the fixed-location technologies especially in rural areas of developed world as well as third world or the developing countries like India Brazil and China that are currently filling the global economic growth.

The smarter organizations are quickly adapting mobile technologies for their businesses. However, they are also realizing that their websites are not catering for the smart mobile users. In India tablet device are being produced at around 50 USD making it affordable for a larger section of population previously unable to get their hands on expensive iPad. These organizations have suddenly realized that they don’t proactively deliver their content to people with no access to desktops or those that mostly doing business on Mobile devices.

More and more people rely on these little devices for both work and play. When visitors access your web content on everything from desktop tablet or mobile phones, it’s important to deliver a good experience to each of those audiences without complex multiplatform instances of your content.

Smart Responsive CSS frameworks, allow websites to respond appropriately to these devices without relying on specific device detection. That way one can deliver a great experience to all users regardless their screen size.

The Responsive CSS fluid grid system is amazing. It make it so that designers can get away from designing in 1024px and developers from having to develop at 1024px. The best part with this fluid system is that it adapts to smaller screen sizes. The best size for this css grid is a 1280px screen but if you only have a 1024px screen you will still see everything like the 1280px screen. One of the best things about this template is really any developer can start using it and understand it.

Two high Points Of Fluid Responsive Design
These approaches have great features. One of the most notable stated before is that it fluidity. This grid system can go as large as 1140px all the way down to mobile. When it gets to mobile size everything gets stacked on top of each other. Another great thing is that for designers you don’t have to design 1280, 1024, mobile, ect. You just have to design once and everything is done. Images get re-sized down smaller so you don’t have to declare inline sizes.

Device Compatibility
New computers, old computers, netbooks, tablets, smartphones, some feature phones. So far we have tested it on MacBooks, iMac, a PC with large and small screens, laptop, an old PCs running xp, Android Phones and tablets, iPad, and iPhone 3G, an iPhone 4, a few older Android phones, a Samsung Galaxy Tab, a BlackBerry and an older Nokia and all seem to behave well.

Cross Browser Compatibility
Another great part is the compatibility. This grid has been tested in Chrome, Safari, Firefox, IE 8, and IE 9. It does work in IE 6 but not completely because on IE 6's lack of modernization. As for mobile browsers, it does work not in all but most modern handheld. Besides browsers and phones it works in pretty much every computer/mac web capable device. Anything from iMac, MacBook, PC laptop, old PC, iPad, iPhone 3G, iPhone 4, and more tests are welcomed - Please let us know at @salaro and we aim to fix issues.

At Salaro we are currently open for business to move your existing web asset in DotNetNuke or other cms to this format. And to show you how it works - we have an example here:

Comments

Name (required)

Email (required)

Website

Enter the code shown above:

Notify me of followup comments via e-mail

Web Trends Comments

WebGL & HTML5 based on OpenGL ES 2.0 for the Web - Can it replace Flash?
http://www.kc-tutor.com/html5-opengl-support.html by Anonymous User

Has the world of CMS opend up for the DIY Mobile? BiznessApps at around $50 a months
The issue you will run into with Bizapps is that y... by Alex

Google Blog About The Plan to Combat Search Spam
http://topsy.com/salargolestanian.com/BLOG/WebTren... by Anonymous User

About Web Trends

These are various Salar Golestanian Blog some long and some short about the latest topics that interest me about Web Trends, Design, Social Media or Mobile Internet and all that is within their jurisdiction. Probably the best place for these would have been for me to place them on SalarO.com, However, some Blogs have less of a commercial or corporate genra, so here they are placed in this personal site. These Blogs help me explain a little more then normally allowed in the 140 character real-estate of a typical Twitter posts. They may also link you to the actual news or site that can expands further on my comments.