Mobile Webseiten mit ASP.NET und jQuery Mobile

Dariusz Parys, Microsoft@writelinehttp://www.writeline.io

Mobile Webseiten mitASP.NET und jQuery Mobile

Visual Studio Evolution 2013

Integration von Web Elementen auf der Arbeitsfläche mit Active Desktop

iPAQ

Mit dem Toshiba Portege 3500 und Windows XP Tablet Edition

SPOT Watch

Die Remote Desktop Verbindung per Smart Display weiterführen

Apple Newton

iOS7

Layout passt sich Formfaktor an

Passende Medienelemente für Formfaktor

Technisch helfen CSS3 Media Queries dabei

24

“ D

esk

top

iPad

Min

i

Kin

dle

Fire

7“

Asu

s Gala

xy

7

Mo

toro

la R

azr

V3

http://quirktools.com/screenfly/

picture

<!-- smallest size first - no @media qualifier -->

source

<!-- medium size - send to viewport widths 400px wide and up -->

source media="(min-width: 400px)"

<!-- large size - send to viewport widths 800px wide and up -->

source media="(min-width: 800px)"

<!-- extra large size - send to viewport widths 1200px wide andup -->

source media="(min-width: 1200px)"

http://scottjehl.com/picturefill/

ASP.NET unterstützt bereits Rendering für mobile Webseiten

Bootstrap OOB

Mobile Views

Unterstützt verschiedene Themes

Enthält praktische Widgets

Touch Ready

Basierend auf jQuery

data-* Elemente Widgets

ui-* css klassen Styling

z.B. $.mobile.loadPage API

• Einzelne Seite pro Datei

• Mehrere Seiten pro Datei

http://jquerymobile.com

• Keine Master Layout Datei möglich (laut Doku schon, aber nicht im 1.4.0 Beta 1 Build)

• Navigation nur auf Einzel Seiten möglich