SLIDE 1
1st June 2012
Adaptive Mobile Web Design
with a server side flavour
James Rosewell & Thomas Holmes
1st June 2012
Explain Server Side options
Objective = Efficient use of…
- 1. your time
- 2. resources (server, client and data network)
Adaptive Mobile Web Design with a server side flavour James - - PowerPoint PPT Presentation
Adaptive Mobile Web Design with a server side flavour James - - PowerPoint PPT Presentation
Adaptive Mobile Web Design with a server side flavour James Rosewell & Thomas Holmes 1st June 2012 Explain Server Side options Objective = Efficient use of 1. your time 2. resources (server, client and data network) 1st June 2012 Agenda
SLIDE 2
SLIDE 3
1st June 2012
Agenda
1. Design Concepts 2. Demonstration
a) 3 Minute Setup b) X2 Content Management Systems c) Live Code
3. Summary
SLIDE 4
1st June 2012
Happy Users
SLIDE 5
1st June 2012 Alter Layout Alter Page Content Share Content & Separate Sites
Different Same Same Different Navigation Page Content
Considerations - Mobile vs Desktop
SLIDE 6
1st June 2012 Alter Layout Alter Page Content Share Content & Separate Site
Different Same Same Different Navigation Page Content
Considerations - Mobile vs Desktop
Server Side Client Side Solution
SLIDE 7
1st June 2012
What is server side detection?
Mobile
1. Request received 2. 51Degrees.mobi plug- in detects client capabilities 3. Response adapted for client
1 3
Web Site
2
Hardware Software Browser
SLIDE 8
1st June 2012 rng.io
Collect Collate Distribute Detect
Usage Data
How do we create data?
Data & APIs
Vendors
SLIDE 9
1st June 2012
Feature Detection - Ringmark
Ringmark ~ 30 seconds 51Degrees.mobi ~> 11ms
Ringmark is a feature detection site - donated to W3C Coremob by Facebook
rng.io
SLIDE 10
1st June 2012 Go on. Try it now. How did we do?
99.8% Accuracy
SLIDE 11
1st June 2012
Benefits
Server adapts response Real devices and browsers Community component Not just browser data
SLIDE 12
1st June 2012
137,581 servers to date 280m devices in April 2012 CMS integration More soon…
SLIDE 13
1st June 2012
Demonstration
3 Minute Setup - .NET & PHP Install CMS – Ingeniux CMS – Dot Net Nuke PHP Site
SLIDE 14
1st June 2012
Visual Studio
Install Video
SLIDE 15
1st June 2012
PHP
Install Video
SLIDE 16
1st June 2012
A Model View Controller CMS
SLIDE 17
1st June 2012
SLIDE 18
1st June 2012
SLIDE 19
1st June 2012
SLIDE 20
1st June 2012
SLIDE 21
1st June 2012
SLIDE 22
1st June 2012
SLIDE 23
1st June 2012
SLIDE 24
1st June 2012
SLIDE 25
1st June 2012
SLIDE 26
1st June 2012
SLIDE 27
1st June 2012
and
7 million downloads #1 Microsoft based CMS UK mobile industry podcast 10k listeners and readers a month
SLIDE 28
1st June 2012
1. Tablets 2. Shared Content 3. Navigation 4. Touchscreen Key Features 5. Mobile Adverts
SLIDE 29
1st June 2012 Alter Layout CSS3
SLIDE 30
1st June 2012 Alter Page Content Share Content & Separate Sites
Different Same Same Different
Navigation Page Content
thefonecast.com - Tablet
Alter Layout
SLIDE 31
1st June 2012 Share Content & Separate Sites
SLIDE 32
1st June 2012 Alter Layout Alter Page Content Share Content & Separate Sites
Different Same Same Different
Navigation Page Content
thefonecast.com - Mobile
SLIDE 33
1st June 2012
Diagram from http://weblogs.asp.net/ianrobinson
Share content through BLL and DAL Only UI layer different
SLIDE 34
1st June 2012
Redirect rules for all pages
SLIDE 35
1st June 2012
“Tweaked” Menus & x2 Skins
Footer menu only shows children Main menu excludes “Mobile” Header mobile menu – only x3 options + “big screen” skin + “mobile” skin
SLIDE 36
1st June 2012
Extra Skin Code “Intelligence”
SLIDE 37
1st June 2012 Set a viewport to limit zoom
SLIDE 38
1st June 2012 Improve usability on touch screens by making buttons and links larger
SLIDE 39
1st June 2012 Add browser specific meta tags
SLIDE 40
1st June 2012
Advert Skin Code
Mobile Google adverts require server side code
Example mobile advert
SLIDE 41
1st June 2012
and
SLIDE 42
1st June 2012
CSS3 vs Server Side
SLIDE 43
1st June 2012
Simple Application
List of Days Events for the day More Days Event Editor
Mobile
1 2
Desktop
Days Events for the day Event Editor
1
SLIDE 44
1st June 2012
Data Difference
18kb 10kb
CSS3 Only Server Side
Extra CSS & Redundant content
- n mobile phone
44% wasted data
Plus no images were used
SLIDE 45
1st June 2012
Key Points
- display:none – wastes data
- used physical screen size to control layout
- images really waste data… demo page
SLIDE 46
1st June 2012
The Device Data
SLIDE 47
1st June 2012
Differences Lite / Premium Data
Lite Premium # Properties 50 103 (IsTablet, Physical Screen Size, Input Method…) Update Frequency Monthly Weekly – automatic Age of Data 3 Months 1 Week Data Licencing Mozilla Public Licence 2 (MPL2) Bespoke – allows white label Cost Free From 64p per Day Platforms / APIs .NET, PHP, Perl with C, Java coming soon – all code MPL2
SLIDE 48
1st June 2012
Redeem your coupon
SLIDE 49
1st June 2012
We’ve covered
- 1. Explain server side options
Efficient use of…
- 2. your time
- 3. resources (server, client and data network)
SLIDE 50
1st June 2012
Affiliates & Partners Wanted
http://51degrees.mobi/MyAccount/AffiliateProgramme.aspx
15% commission for web referrals Higher for resellers & specific opportunities
SLIDE 51
1st June 2012 .NET: DotNetNuke, Igeniux, Umbraco, WebNodes, SiteCore, nopCommerce; PHP: Wordpress, Joomla, Drupal, CodeIgniter; Perl with C & Java and more CMSs coming soon http://51degrees.mobi/ota for presentation, video and code