Mobile Web Development

neversinkhurriedΚινητά – Ασύρματες Τεχνολογίες

12 Νοε 2013 (πριν από 3 χρόνια και 1 μήνα)

49 εμφανίσεις

Mobile Web Development

© 2012 Wilder Minds LLC

Shawn
Wildermuth

One of the Minds, Wilder Minds LLC

Microsoft MVP

@
shawnwildermuth

http://wilderminds.com

Mobile Web Development

Responsive Design and ASP.NET MVC4

to the
Rescue

Mobile Web Development

© 2012 Wilder Minds LLC

Mobile Web Development

© 2012 Wilder Minds LLC

The Problem…


Device Size


Screen Resolution


Text Size


Horizontal Scrolling Sucks


Touch versus Click

Mobile Web Development

© 2012 Wilder Minds LLC

Solutions?


Mobile Web Site


Mobile Specific Site


E.g. m.facebook.com


Mobile Views


Render Pages for Mobile Based on Sniffing


URLs are the same, but the result is different


Responsive Design


Use CSS to adapt

Mobile Web Development

© 2012 Wilder Minds LLC

Solutions?


Mobile Web Site


For Apps…good solution


but potential double work


Mobile Pages


Can decide on a page
-
by
-
page


Controllers likely similar/same


But front
-
end is different


Responsive Design


Great for content related changes

Mobile Web Development

© 2012 Wilder Minds LLC

Responsive Design


Site that adapts to screen size/orientation


Most of magic is in CSS


Use media queries to segment design


Mobile Web Development

© 2012 Wilder Minds LLC

Responsive Design

Main CSS (Common Design)

960+ (Standard Browsers)

0
-
959 (Tablet Landscape)

768
-
959
(Tablet
Portrait and up)

0
-
767 (Mobile Sizes)

0
-
479 (Mobile Portrait)

480
-
767 (Mobile
Landscape)

Mobile Web Development

© 2012 Wilder Minds LLC

Responsive Design


Media Queries


Works because of cascading rules


Later rules over
-
rule (pun!) earlier rules


More specific rules overrule earlier rules



// your.css

#main { width
:
989px
;
}


@
media only screen and (min
-
width: 768px) and (max
-
width: 959px) {


#
main { width: 760px; }

}


@media only screen and (max
-
width: 767px) {


#
main { width
: 470px
; }

}

Mobile Web Development

© 2012 Wilder Minds LLC

Demo

Responsive Design

Mobile Web Development

© 2012 Wilder Minds LLC

Mobile Views in ASP.NET MVC 4


Controller Agnostic


Naming Convention Uses Mobile Views


Page.cshtml

and
Page.mobile.cshtml


For specific scenarios, API:


Request.Browser.IsMobileBrowser

Mobile Web Development

© 2012 Wilder Minds LLC

Demo

Using Mobile Views

Mobile Web Development

© 2012 Wilder Minds LLC

Improving Mobile Views


Updated Device Detection


Using 51degrees
Nuget

Package can help


Improves the Quality of Detection


51degrees.mobi


Free Version is fine but fee for newer data


Mobile Web Development

© 2012 Wilder Minds LLC

Device Specific Views


Can also create own specific views


Useful for device specific views

// In
Application_Start

(
Global.asax.cs
)


// Create iPhone Specific View Option

v
ar

iPhoneDisplay

= new
DefaultDisplayMode
("iPhone")

{


ContextCondition

=
context
=>


{


return
context.GetOverriddenUserAgent
()


.
IndexOf
("
iPhone",



StringComparison.OrdinalIgnoreCase
) >=
0
;


}

};


// Add it to the Provider

DisplayModeProvider.Instance.Modes.Insert
(0,
iPhoneDisplay
);

Mobile Web Development

© 2012 Wilder Minds LLC

Demo

Using Device Specific Filter

Mobile Web Development

© 2012 Wilder Minds LLC

Mobile Frameworks


Makes it easier to build mobile pages


Typically pages with more state than content


jQuery

Mobile


KendoUI

Mobile


Support styling


So you can customize per platform

Mobile Web Development

© 2012 Wilder Minds LLC

Demo

jQuery

Mobile in Action

Mobile Web Development

© 2012 Wilder Minds LLC

Mouse and Touch are Different



Supporting Touch on Devices is Important


Detecting Touch is Key (and easy)


Modernizr


And Implementing Touch


TouchSwipe

Mobile Web Development

© 2012 Wilder Minds LLC

Demo

Swiping
at HTML

Mobile Web Development

© 2012 Wilder Minds LLC

Takeaways…


This demo and slides will be available:


http://wildermuth.com


Important Links


http://www.asp.net/mvc/mvc4


http
://jquerymobile.com
/


http://
www.kendoui.com/mobile


http://modernizr.com/


http
://labs.skinkers.com/touchSwipe
/


My Company


http://wilderminds.com