TERMINALFOUR t44u 2011- make it mobile mobile sites with site manager

357 views
297 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
357
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

TERMINALFOUR t44u 2011- make it mobile mobile sites with site manager

  1. 1. Mobile sites with Site Managert44u 2011
  2. 2. Adding a mobile site.. • Mobile version using an existing site and channel in Site Manager • Using a separate channel on an existing site • Creating a new channel and site structure • Creating a mobile site as sub section of an existing sitet44u 2011 Mobile Sites with Site Manager 2
  3. 3. Mobile version of existing sitet44u 2011 Title set in footer 3
  4. 4. Mobile version of existing site • Old sites used CSS media types for handheld devices – <link rel="stylesheet" media="handheld" href=“phone.css" type="text/css"> • These are no longer being used by modern mobile browsers – Switch to “Responsive Web Design”t44u 2011 Mobile Sites with Site Manager 4
  5. 5. Mobile version of existing site Responsive Web Design • Uses CSS3 Media Queries – <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href=“iphone.css" /> • Single site can be viewed differently across multiple devices (PC, Tablet, Phone)t44u 2011 Mobile Sites with Site Manager 5
  6. 6. Mobile version of existing site Responsive Web Design The Boston Globe bostonglobe.com HTML5 & CSS3t44u 2011 Mobile Sites with Site Manager 6
  7. 7. Mobile version of existing site Responsive Web Design • Benefits • Minimal setup in Site Manager – additional CSS and small modifications to styles needed • Disadvantages • Full DOM & content of page sent to the device – Could be slow when on low bandwidth • Best used when creating a new site which can be created with flexibility in mind. Not ideal for add-ons to existing sites with legacy code.t44u 2011 Mobile Sites with Site Manager 7
  8. 8. Mobile channel on an existing site structuret44u 2011 Title set in footer 8
  9. 9. Mobile channel on existing site • A new channel created using the same section as the existing site. • Sample Data Mobile • HTML5 & CSS3t44u 2011 Mobile Sites with Site Manager 9
  10. 10. Mobile channel on existing site • Benefits – Can reuse existing content – Separate mobile style allows for mobile frameworks – Less Bandwidth • Disadvantages – Existing Content may not be suitable – Site Structure not relevantt44u 2011 Mobile Sites with Site Manager 10
  11. 11. New Mobile channel and site structuret44u 2011 Title set in footer 11
  12. 12. New Channel and Structure • A new channel can be setup with a completely new Site Structure • University of Illinois at Chicago • XHTML & jQueryt44u 2011 Mobile Sites with Site Manager 12
  13. 13. New Channel and Structuret44u 2011 Mobile Sites with Site Manager 13
  14. 14. New Channel and Structure • Benefits – Mobile specific site structure – Separate styles allow the use of mobile specific frameworks (jQuery Mobile etc.) – Can now reuse sections & content thanks to Section Mirroring. • Disadvantages – Cannot link Navigation objects between mobile site and existing site.t44u 2011 Mobile Sites with Site Manager 14
  15. 15. Mobile site as a sub section of the existing sitet44u 2011 Title set in footer 15
  16. 16. Mobile site as sub section • Creating a sub section to the current site to create a separate mobile structure • Queens University Belfast • HTML5 & jQuery Mobilet44u 2011 Mobile Sites with Site Manager 16
  17. 17. Mobile site as sub sectiont44u 2011 Mobile Sites with Site Manager 17
  18. 18. Mobile site as sub section • Benefits – Mobile specific site structure – Separate styles allow the use of mobile specific frameworks (jQuery Mobile etc.) – Can now reuse sections & content thanks to Section Mirroring. – Easily link back to main site with Navigation Objectst44u 2011 Mobile Sites with Site Manager 18
  19. 19. What to use creating mobile sites?t44u 2011 Title set in footer 19
  20. 20. What to use.. • Cross Platform compatibility – Apple/iOS, Android, Windows Phone, RIM/Blackberry.. • Great new features in HTML5 – Local Storage – Geolocation – Canvas – Videot44u 2011 Title set in footer 20
  21. 21. What to use.. • WebKit is the largest rendering engine for mobile browsers and used by most major vendors (Apple, Google, Blackberry/RIM). Tablet/Mobile Browser Share Q4 2011 - netmarketshare.comt44u 2011 Mobile Sites with Site Manager 21
  22. 22. What to use.. • JavaScript mobile frameworks can be used to help mobile site development … and moret44u 2011 Mobile Sites with Site Manager 22
  23. 23. t44u 2011 Mobile Sites with Site Manager 23

×