Custom Skinning and HTML 5

All about Custom Skinning for your DotNetNuke Portal

SalarO is a professional Internet consulting and web design company, specializing in CMS, in particular DotNetNuke Content Management Systems, online marketing, Flash multimedia, corporate identity and print graphics. SalarO features an integrated team of web consultants, creative designers, programmers and marketing professionals who know how to get online results.

Our business-driven approach separates us from typical web design companies. We have built a reputation for creating a positive return on investment for our clients in particular designing for DotNetNuke CMS system. If you are serious about your web design success, then by implementing DotNetNuke, we can get you there.

Strategic thinking, top designers, personal attention, competitive prices, real world results - discover the SalarO difference.

In a typical project this is what we do:

Listen to your requirements and write an Art Direction that we all agree.
Art Direction goes to our Design team where they produce a visual to test the waters
there may be a need for more original visuals or perhaps just revisions, until a final Photoshop PSD is produced and signed off.
The PSD files goes to our skinning team to produce an advanced skin and container package using the required advanced navigation
The package gets applied to your site
if required the content team can create any number of templates pages for you to use and build more pages.

Content rebuild

Keeping your website current isn’t just about updating the content. The look of every page tells a story, too. At SalarO we can perform a ‘makeover’ on your present site content reconstruction. We have a wealth of experience of taking old sites and breathing creativity and life into them. Our website content team can transform your current site and turn it into something that reflects the state and look of your company today's web 2.0 and 3.0 demanding standards.

SmartPhone and Mobile Support

There are two approach to this for your DNN site:

Microsite that has slimmed down version of your site with minimized content specific for smartphone devices - this requires pointing the smartphone devices to either the microsite or series of pages on your dnn site rather than the standard homepage that is normally designed for desktop/laptop or large tablets like iPad.
Smart grid skin pack that can automatically detect the size of the window and display standard content to all size devices. This approach is demonstrated in this site here and please reduce the window size and see how the page is displayed all the way down to a iPad size screen size.

Advanced SmartPhone Support is rather new for DNN world and here we have used the new approach in the template used in dotnetnuke.co.uk you see here. If you are using your pc to browse these pages, then please go ahead and reduce the size of the browser window from wide to approximately an iPhone or Android typical device you can see how the @media controls the flow of the content and how navigation changes to suite small screen size.

This is achieved by our 1140 grid that 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. We believe therefore that you can Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.

Mobile version
By mobile, I really mean smart phones. We are not even attempting to support WAP phones or anything old like that. But it does work on devices that recognise 'handheld' in the style sheet media and/or media queries. With media queries you can even include x2 images for the iPhone 4 Retina Display.

New computers, old computers, netbooks, tablets, smartphones, some feature phones.
So far We have tested it on a MacBooks, an iMac, a PC laptop, an old PC, an Eee PC, an iPad, an iPhone 3G, an iPhone 4, Android (Sony live) a few other Android phones, a Samsung Galaxy Tab, a BlackBerry and an older Nokia and all seems to be good.

Browser support
It works perfectly in Chrome, Safari, Firefox, IE7 & IE8.

It works alright in IE6. IE6 doesn't support max-width, so the grid doesn't fix to 1140px. It spans the full width of the browser. Most people using IE6 probably don't have monitors with a resolution higher than 1280x1024 though. Images are also not restrained to the width of the column because of max-width. But the extra image is hidden, rather than breaking the layout.

Bigger gutters
Because it's all based off percentages, the gutters vary in size. But at full width the gutters are about 40px wide.

Images
If an image is smaller than the column it is contained in, it will be displayed at its original size. If it is larger then it will be shrunk to the width of the column. Don't define height and width of images inline, it'll break the proportions if they're scaled down.

Get a Quote for Custom SmartPhone site design
Please use this form and ask us for a quote for the fluid skin design and package for your DotNetNuke portal.

Costs

Please call us or email us with your requirements and we will come back to you with a price. Please see some examples of prices here.

Web animation & banners from 100 Euro
Splash page for your DotNetNuke or advanced JQuery animation 199 Euro
Custom concept - finished skin applied to your site from 500 Euro
Packaged DIY skin packs from 50 Euro

Recently Released Skins

BlueCommerce is the recent Skin pack built with Responsive CSS Framework and it is ideal for those wanting to create a modern E-Commerce or a typical Product and Services site that behaves well for Desktop, Tablet and Smart-Phones.

Responsive CSS SkinPack is our original Skin pack built with Responsive CSS Framework and it is ideal for those wanting to create a modern informational or a typical Product and Services site that the content behaves well for Desktop, Tablet and Smart-Phones.