10 Tips For DotNetNuke Skins for SmartPhones

DotnetNuke skinning is changing with the latest trends one of which is building websites for smartphones and handheld devices like iPod, iPad, Android-based smartphones and many more. In this Article I have shared 10 tips which will be extremely useful for DotnetNuke Skinning for smartphones and most handheld devices.

 

Tip #1

basic mobile styles
html, body {
background: #fff;
color: #000;
margin: 0;
padding: 0;
font: 12px/15px sans-serif;
}


Do not rely on support of font related styling

Tip #2

No width content, careful with floats

  • {width: auto;}
  • {float: none;}

Tip #3

Setting the viewport

Add to <head> section
<meta name=”viewport” content=“width=device-width”/>
In DNN, add to default.ascx
<script language=”javascript” type=”text/javascript” >
var script = document.createElement(“meta”);
script.name = “viewport”;
script.content = “width=device-width”;
document.getElementsByTagName(“head”).item(0).appendChild(script);
</script>

Tip #4

keep it simple

  • What are mobile visitors looking for?
  • What information do they want/need?
  • Do mobile visitors have time/interest in all of my tedious sidebar content?
  • With a barebones stylesheet, which elements are clearly superfluous?
  • Which navigational elements are absolutely necessary? Which are redundant?
  • Are there entire regions of my page that would be better off not displayed?


Display only the essential no leftpane or right pane

.leftpane, .rightpane {
display: none;
}

Tip #5

top navigation (vertical)
.mi, .mi .txt {display:block !important; text-align:left; margin:0 !important;}

Tip #6

Control image width

#content img {max-width: 250px;}
or
img {max-width: 250px;}

Tip #7

Slim headings
h1, h2, h3, h4, h5, h6 {font-weight: normal;}

Tip #8

links
Highlight links


a:link, a:visited {
text-decoration: underline;
color: #0000CC;
}
a:hover, a:active {
text-decoration: underline;
color: #660066;
}
Use the tel: de facto standard
<a href=“tel:+1999999999“>Call us!</a>
Avoid target=_blank

Tip #9

Forms

  • Minimum input
  • Do not use tables for layout
  • Use definition lists (dl, dt, dd)

Tip #10

  • Keep URIs of site entry points short
    www.example.org/example.html accept example.org/example
  • careful with color contrasts
  • Use (minimum) web standards
    XHTML 1.0 / HTML 4.01 / XHTML-MP, CSS 2.1, DOM 1, ECMAScript 3
  • Always specify a doctype
  • Use standard media types
    Static: JPEG, GIF, PNG / Dynamic: 3GP, AVI, WMV, MP4

Do not use the following tags

  • × frames
  • × tables for layout
  • × nested tables
  • × image maps
  • × graphics for spacing
  • × horizontal scrolling
  • × do not rely on plug-ins, DHTML behaviors, embedded objects or script