The document discusses several options for creating mobile sites using Site Manager: 1. Creating a mobile version of an existing site using a separate channel and responsive design with CSS media queries. 2. Adding a new mobile channel to an existing site structure to reuse content with a separate mobile style. 3. Creating a new mobile channel and site structure for a mobile-specific design using frameworks like jQuery Mobile. 4. Developing a mobile site as a subsection of an existing site for a separate mobile structure while linking back to the main site. The document recommends considering cross-platform compatibility, HTML5 features, and JavaScript frameworks to enhance the mobile experience.

1. Mobile sites with Site Manager
t44u 2011

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 site
t44u 2011 Mobile Sites with Site Manager 2

3. Mobile version of existing site
t44u 2011 Title set in footer 3

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. 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. Mobile version of existing site
Responsive Web Design
The Boston Globe
bostonglobe.com
HTML5 & CSS3
t44u 2011 Mobile Sites with Site Manager 6

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. Mobile channel on an
existing site structure
t44u 2011 Title set in footer 8

9. Mobile channel on existing site
• A new channel created using the same section
as the existing site.
• Sample Data Mobile
• HTML5 & CSS3
t44u 2011 Mobile Sites with Site Manager 9

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 relevant
t44u 2011 Mobile Sites with Site Manager 10

11. New Mobile channel
and site structure
t44u 2011 Title set in footer 11

12. New Channel and Structure
• A new channel can be setup with a completely
new Site Structure
• University of Illinois at
Chicago
• XHTML & jQuery
t44u 2011 Mobile Sites with Site Manager 12

13. New Channel and Structure
t44u 2011 Mobile Sites with Site Manager 13

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. Mobile site as a sub section
of the existing site
t44u 2011 Title set in footer 15

16. Mobile site as sub section
• Creating a sub section to the current site to
create a separate mobile structure
• Queen's University
Belfast
• HTML5 & jQuery Mobile
t44u 2011 Mobile Sites with Site Manager 16

17. Mobile site as sub section
t44u 2011 Mobile Sites with Site Manager 17

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 Objects
t44u 2011 Mobile Sites with Site Manager 18

19. What to use
creating mobile sites?
t44u 2011 Title set in footer 19

20. What to use..
• Cross Platform compatibility
– Apple/iOS, Android, Windows Phone, RIM/Blackberry..
• Great new features in HTML5
– Local Storage
– Geolocation
– Canvas
– Video
t44u 2011 Title set in footer 20

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.com
t44u 2011 Mobile Sites with Site Manager 21

22. What to use..
• JavaScript mobile frameworks can be used to
help mobile site development
… and more
t44u 2011 Mobile Sites with Site Manager 22

23. t44u 2011 Mobile Sites with Site Manager 23