onmouseover="dead"

Mark Allan (MarkXA) – DNNGarden.com

onmouseover=“dead”

DNN in the new mobile world


What we’ll be covering Why worry? Possible approaches Implementing solutions Testing DNN 6 Arguments Discussion


What we’ll not be covering Details of mobile design• I’m a developer, not a designer• See skin contest mobile entries

jQuery Mobile and other frameworks• Nik just gave a talk on that!


Why worry?


Mobile browsing is growing

Mobile browser share now 7.7%, up from 1.7% 18 months ago

StatCounter reports 6.5% up from 1.2% worldwide


And it’s not going to stop

Roughly 25% projected growth year-on-year


What is “mobile” anyway? Phones? iOS/Android tablets?? Windows tablets??? Surface????


Option 1: Do nothing


The “do nothing” option Mobile browsers can show desktop

sites


The “do nothing” option Pros:• Very easy!

Cons:• Touch devices have no mouseover, not

good for standard DNN flyout menus• Forces the user to zoom around the

page, not ideal UX• Usually heavy on bandwidth


Demo

Tweaking a desktop site


Option 2: CSS


One skin for all devices Use stylesheet media types and

CSS3 media queries to apply different CSS to a single skin, e.g.

• <link rel="stylesheet" type="text/css" href="mobile.css" media="handheld" />

• @media (min-width:450px) { .leftcol { width: 30% }}


One skin for all devices Pros:• Flexible solution• Doesn’t rely on browser sniffing

Cons:• Inconsistent browser support• Not easy to implement reduced

bandwidth• Content remains the same


Demo

Using @media


Option 3: Multiple skins


Multiple skins Create multiple ASCX skin files for

e.g. desktop, mobile, tablet Master ASCX uses server-side user

agent detection to determine which one to load

MySkin.ascx

MySkin_Desktop.ascx

MySkin_Mobile.ascx

MySkin_Tablet.ascx


Multiple skins Pros:• Can produce entirely different layouts if

necessary• Once set up, easy to maintain

Cons:• Relies on browser sniffing (e.g.

http://detectmobilebrowser.com or http://51degrees.codeplex.com)

• Technically a bit tricky• Content remains the same

http://detectmobilebrowser.com/

http://51degrees.codeplex.com/


Demo

Skin switching


Option 4: Multiple sites


Multiple sites Create two sites, one for desktop and

one for mobile, e.g.• www.mysite.com• m.mysite.com

Portal 1www.mysite.comDesktop content

Portal 2m.mysite.com

Mobile content


Multiple sites Pros:• Complete control• Content can be varied

Cons:• No sharing of content, users, etc

between portals


Option 5: Micro-sites


Create two sets of pages, one for desktop and one for mobile

Micro-sites

Single portal

Desktop pages Mobile pages


Micro-sites Pros:• Complete control• Content can be varied• Mobile and desktop can share content,

users, etc

Cons:• SEO issues• Technically difficult


Demo

Micro-sites


Option 6: Apps


Work out what functionality your site offers

Wrap it up as a mobile app

The nuclear option


The nuclear option Pros:• Cool• Raises engagement levels• Possibility of offline access

Cons:• Difficult• Expensive


Testing mobile sites


Testing – which browsers?


Emulators http://www.opera.com/mobile/demo/ - Opera Mini

(online emulator) http://labs.opera.com/downloads/ - Opera Mobile http://developer.android.com/ http://www.forum.nokia.com/Library/Tools_and_down

loads/Other/Symbian_SDKs/ http://

developer.apple.com/devcenter/ios/index.action (requires Mac)

http://us.blackberry.com/developers/resources/simulators.jsp

http://create.msdn.com/ (Windows Phone)

http://www.opera.com/mobile/demo/

http://labs.opera.com/downloads/

http://labs.opera.com/downloads/

http://developer.android.com/



http://developer.apple.com/devcenter/ios/index.action







http://create.msdn.com/


Testing services Two main options:• http://deviceanywhere.com/• http://perfectomobile.com/

Remote access to real devices Cost about $15/hour

http://deviceanywhere.com/

http://perfectomobile.com/


DotNetNuke 6


DotNetNuke 6 No new features in 6.0 Preliminary plans for 6.1+• Micro-sites• Mobile detection and redirection

In the meantime• 40Fingers style helper• mobiNuke


Questions?

[email protected]

Technology

onmouseover="dead"