Kentico CMS 7 – Mobile web development
-
Upload
thomas-robbins -
Category
Technology
-
view
1.979 -
download
1
description
Transcript of Kentico CMS 7 – Mobile web development
![Page 1: Kentico CMS 7 – Mobile web development](https://reader036.fdocuments.in/reader036/viewer/2022081505/55561040d8b42ae0238b4b5a/html5/thumbnails/1.jpg)
Kentico CMS 7 : Mobile web developmentJuraj Hrinik, [email protected]
![Page 2: Kentico CMS 7 – Mobile web development](https://reader036.fdocuments.in/reader036/viewer/2022081505/55561040d8b42ae0238b4b5a/html5/thumbnails/2.jpg)
Kentico CMS 7 – Ramp Up WebinarsDate Title Registration linkAugust 30, 2012 (8-9 AM PST)
Kentico CMS 7 – Achieving Marketing Success
Register here
August 28, 2012 (8-9 AM PST)
Kentico CMS User Group Presents: Here Comes Version 7!
Register here
For more information – go to http://bit.ly/LRsDJP
![Page 3: Kentico CMS 7 – Mobile web development](https://reader036.fdocuments.in/reader036/viewer/2022081505/55561040d8b42ae0238b4b5a/html5/thumbnails/3.jpg)
New features
• Mobile device detection– Detected by user agent– Support for external service (51degrees.mobi)
• Device profiles– Category of similar devices
• Automatic layout transformation– Switches between shared layouts automatically according to current device
profile • Custom device layout
– Define completely new layout for device profile
![Page 4: Kentico CMS 7 – Mobile web development](https://reader036.fdocuments.in/reader036/viewer/2022081505/55561040d8b42ae0238b4b5a/html5/thumbnails/4.jpg)
Existing features
• Conditional layouts– Layout switched by macro expressions
• CSS design changes– Auto generated CSS class for current device profile
![Page 5: Kentico CMS 7 – Mobile web development](https://reader036.fdocuments.in/reader036/viewer/2022081505/55561040d8b42ae0238b4b5a/html5/thumbnails/5.jpg)
Mobile device detection
• Detection by user agent from client device• Two ways to detect:
– Kentico specified XML for user agents• Out of the box solution
– 51degrees.mobi provider• Automatic updates
![Page 6: Kentico CMS 7 – Mobile web development](https://reader036.fdocuments.in/reader036/viewer/2022081505/55561040d8b42ae0238b4b5a/html5/thumbnails/6.jpg)
Device profiles
• Category of similar devices– No need to define design for each device
• Multiple type of detection– You can simplify and tweak detection
• Preview– Viewport dimensions of preview in CMSDesk
• Ordered list– Better control to detection
![Page 7: Kentico CMS 7 – Mobile web development](https://reader036.fdocuments.in/reader036/viewer/2022081505/55561040d8b42ae0238b4b5a/html5/thumbnails/7.jpg)
Automatic layout transformation
• For shared layouts• You can define if layout is convertible and number of web part zones• Automatically layout switch defined for each device profile
– One layout can be mapped for different device profiles differently– Layout mapping is in device profiles UI
![Page 8: Kentico CMS 7 – Mobile web development](https://reader036.fdocuments.in/reader036/viewer/2022081505/55561040d8b42ae0238b4b5a/html5/thumbnails/8.jpg)
Custom device layout
• Separated layout definition for each device profile• Perfect solution for complex designs• Ability to copy layout from other profile
![Page 9: Kentico CMS 7 – Mobile web development](https://reader036.fdocuments.in/reader036/viewer/2022081505/55561040d8b42ae0238b4b5a/html5/thumbnails/9.jpg)
Conditional layouts
• CMSConditionalLayout– Special layout control– Specify visibility of layout through macro expression
• CMSDeviceLayout control– Designed for device profiles– Based on CMSConditionalLayout control
![Page 10: Kentico CMS 7 – Mobile web development](https://reader036.fdocuments.in/reader036/viewer/2022081505/55561040d8b42ae0238b4b5a/html5/thumbnails/10.jpg)
CSS design changes
• Device profile name in body CSS– For better design capabilities
• CSS3 media queries– Not Kentico feature – Based on CSS2 media type definition
![Page 11: Kentico CMS 7 – Mobile web development](https://reader036.fdocuments.in/reader036/viewer/2022081505/55561040d8b42ae0238b4b5a/html5/thumbnails/11.jpg)
Questions
?
![Page 12: Kentico CMS 7 – Mobile web development](https://reader036.fdocuments.in/reader036/viewer/2022081505/55561040d8b42ae0238b4b5a/html5/thumbnails/12.jpg)
Useful links
• http://www.smashingmagazine.com/guidelines-for-mobile-web-development/• http://www.w3.org/TR/mobile-bp/
![Page 13: Kentico CMS 7 – Mobile web development](https://reader036.fdocuments.in/reader036/viewer/2022081505/55561040d8b42ae0238b4b5a/html5/thumbnails/13.jpg)
Contact
Juraj Hrinik• e-mail: [email protected]• twitter: @hrinik• web: http://denver.kentico.com• blog: http://devnet.kentico.com/Blogs/Juraj-Hrinik.aspx