Mobile Web 2.0

matt lacey@mrlacey - blog.mrlacey.co.uk -

mrlacey.mobi

Eagle Eye Technology“Creative Thinking for Mobile Technologies”

http://www.eagleeyetechnology.com/http://m.eagleeyetechnology.com/

Web 2.0

1. The Web as a Platform2. Harnessing Collective

Intelligence3. Data as the Next “Intel Inside”4. End of the Software Release

Cycle5. Lightweight Programming

Models6. Above the level of a single

device7. Rich User Experiences

Above the level of a

single device

"we expect that eventually the majority of the usage of the internet will be on mobile phones"

"Mobile devices are the most important technology of them all."

“Google’s future depends on the next internet, on cellphones.”

Who’s using the mobile web?

17,400,000 users in the UK

Mobile Social Networks(350% increase in last 6 months - Orange)

What’s changed?

What is “Mobile”?•Person not device•About context•About the “Point of Inspiration”•30 second not 30 minutes•Not about minaturisation

<%@ Page language="C#" Inherits="System.Web.UI.MobileControls.MobilePage" %><%@ Register TagPrefix="Mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>

<mobile:Form id=Form1 runat="server"> <mobile:Label id=Test Runat="Server">

Hello, Mobile World</mobile:Label>

</mobile:Form>

_support_browserIdentity_support_deviceIdentity_support_majorVersion_support_minorVersionAcceptsAudio3gppAcceptsAudioAacAcceptsAudioAmrAcceptsAudioIMelodyAcceptsAudioMidiAcceptsAudioMp3AcceptsAudioWavAcceptsImageBmpAcceptsImageGifAcceptsImageJpegAcceptsImagePngAcceptsImageSVGAcceptsVideo3gppAcceptsVideoMpegAcceptsVideoMpeg4activexcontrolsAjaxCanManipulateCssAjaxSupportsFullDomAjaxSupportsGetElementByIDAjaxSupportsInnerHtmlAjaxXmlHttpRequestConstructorSyntaxAk aolauthenticodeupdatebackgroundsoundsBeta browsercachesAllResponsesWithExpirescanCombineFormsInDeckcanInitiateVoiceCallcanRenderAfterInputOrSelectElementcanRenderEmptySelectscanRenderInputAndSelectElementsTogethercanRenderMixedSelectscanRenderOneventAndPrevElementsTogethercanRenderPostBackCardscanRenderSetvarZeroWithMultiSelectionList

canSendMail cdfCookies crawlerCss1 css2defaultCharacterHeightdefaultCharacterWidthdefaultScreenCharactersHeightdefaultScreenCharactersWidthdefaultScreenPixelsHeightdefaultScreenPixelsWidthdefaultSubmitButtonLimitecmascriptversionframesgatewayMajorVersiongatewayMinorVersiongatewayVersionGold hasBackButtonhidesRightAlignedMultiselectScrollbarsinputType isColorisMobileDeviceIsSslSupported javaappletsJavascript jscriptversionmajorversionmaximumHrefLengthmaximumRenderedPageSizemaximumSoftkeyLabelLengthMaxUrlLengthminorversionmobileDeviceManufacturermobileDeviceModelmsdomversionnumberOfSoftkeysplatformpreferredImageMimepreferredRenderingMimepreferredRenderingTyperendersBreakBeforeWmlSelectAndInputrendersBreaksAfterHtmlListsrendersBreaksAfterWmlAnchorrendersBreaksAfterWmlInput

rendersWmlDoAcceptsInlinerendersWmlSelectsAsMenuCardsrequiresAdaptiveErrorReportingrequiresAttributeColonSubstitutionrequiresContentTypeMetaTagrequiresDBCSCharacterrequiresFullyQualifiedRedirectUrlrequiresHtmlAdaptiveErrorReportingrequiresLeadingPageBreakrequiresNoBreakInFormattingrequiresNoescapedPostUrlrequiresNoSoftkeyLabelsrequiresOutputOptimizationrequiresPhoneNumbersAsPlainTextrequiresPostRedirectionHandlingrequiresSpecialViewStateEncodingrequiresUniqueFilePathSuffixrequiresUniqueHtmlCheckboxNamesrequiresUniqueHtmlInputNamesrequiresUrlEncodedPostfieldValuesscreenBitDepthscreenPixelsHeightscreenPixelsWidthSk SupportedAudio3gppVersionSupportedFlashVersionSupportedImageGifVersionSupportedVideo3gppVersionsupportsAccesskeyAttributesupportsBodyColorsupportsBoldsupportsCacheControlMetaTagsupportsCallbacksupportsCharacterEntityEncodingSupportsCHtmlRenderingsupportsCssSupportsCssBackgroundColorSupportsCssBackgroundImageSupportsCssBorderSupportsCssHyperLinkColorAttribute

SupportsCssMarginSupportsCssPaddingsupportsDivAlignsupportsDivNoWrapSupportsEmbeddedFlashInWebPagessupportsEmptyStringInCookieValuesupportsFileUploadsupportsFontColorsupportsFontNamesupportsFontSizeSupportsHtmlRenderingsupportsImageSubmitsupportsIModeSymbolssupportsInputIStylesupportsInputModesupportsItalicsupportsJPhoneMultiMediaAttributessupportsJPhoneSymbolssupportsMaintainScrollPositionOnPostbacksupportsMultilineTextBoxDisplaysupportsQueryStringInFormActionsupportsRedirectWithCookieSupportsSamePageAnchorLinkssupportsSelectMultipleSupportsStandAloneFlashSupportsSymbolAccessKeysSupportsTouchScreensupportsUnchecksupportsVCardSupportsWapPushSupportsXHtmlRenderingTables tagwritertypeUsableScreenPixelsHeightUsableScreenPixelsWidthVbscript versionW3cdomversion Win16Win32 xml

http://mdbf.codeplex.com/

Mobile Device Browser File

How mobilise?

• Separate site or sub-domain

• Adaptive site

• Content appropriate to device

• Remember user context

4 Top Tips

• 1 mobile device != another• Keep pages simple & small• Test on real devices (eventually)

• Mobilise don’t just minimise

Alternatives

•UAProfile•WURFL (http://wurfl.sourceforge.net/)

•Device Atlas (http://www.deviceatlas.com)

•DetectRight (http://www.detectright.com/)

•Volantis (http://www.volantis.com/)

•MobileAware (http://www.mobileaware.com/)

More Information

•http://mdbf.codeplex.com/

•http://mobiforge.com/

•Talk to me