Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Creating Mobile     Websites with Kentico     CMS 7Thomas Robbins, Chief Evangelist Kentico CMS
The rise of mobile..               A few stand out stats:               • There are currently 6 Billion mobile subscribers...
Getting started with a project…• What’s your mobile  statistics? Does it matter?• What’s your timeline and  budget?• Who i...
The choices…           Access Methods        Solution                           Benefits                   Drawbacks      ...
The rest of the story…      Solution           Time to build         Ease of delivery     Cost   Summary                  ...
Google Chrome playing with user agents…                      • Select CTRL-Shift J                      • Select Settings ...
Feature overview: Device profiles• Part of building and viewing mobile websites   – Used to identify categories of similar...
ScenarioMOBILE SUB SITES
The web part…                Detection by user agent from client device                Two ways to detect:                ...
ScenarioRESPONSIVE DESIGN
What is responsive design…                  • Components                      – Fluid layouts                      – Fluid...
Getting started…                   • Depending on your browser you                     have a couple of options that you  ...
Fluid layouts/images…• Death to the pixel!The new math…Target/Context = result• Use percentages and em to ensure correct  ...
CSS Media queries…• Ability to target media (devices) with specific CSS• Target screen sizes with max-width      @media sc...
Layout mapping…•   Replace shared page layouts with device    specific shared layouts•   You can define     – If layout is...
Device layout…• Separated layout definition for each device profile• Rearrange web part zones as needed• Ability to copy l...
Conditional layouts• One template to rule them all!   – CMSConditionalLayout (V6)       • Special layout control       • S...
Extending responsive design with Kentico 7…Responsive Design            Mobile layout• Up front design            • Can be...
ScenarioAPPLICATION STORES
What are they?                 • Stored and run locally on the device and have                   full access to the platfo...
Native apps…                  • Performance intensive applications                  • Disconnected or offline apps        ...
Hybrid applications…                  • Applications with basic user interface and functionality                  • Busine...
Short list recommendations…  Native applications  •   Performance intensive applications  •   Marquee applications that ca...
Questions             Thanks!       Thomas Robbins, Chief Evangelist           thomasr@kentico.com                @trobbins
Upcoming SlideShare
Loading in …5
×

Creating Mobile Websites with Kentico CMS 7

3,439 views

Published on

Learn how to build mobile websites with Kentico CMS 7.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Creating Mobile Websites with Kentico CMS 7

  1. 1. Creating Mobile Websites with Kentico CMS 7Thomas Robbins, Chief Evangelist Kentico CMS
  2. 2. The rise of mobile.. A few stand out stats: • There are currently 6 Billion mobile subscribers worldwide • This equals approximately 87% of the world’s population • China and India account for 30% of this growth • There are over 1.2 Billion people accessing the web from their mobiles • Over 300,000 apps have been developed in the past 3 years • Google earns 2.5 Billion in mobile ad revenue annually • Android is running half of all smartphones shipped
  3. 3. Getting started with a project…• What’s your mobile statistics? Does it matter?• What’s your timeline and budget?• Who is your target audience?• What is the target platforms for the application?• What are the application features and functionality?• What are the developer skills?
  4. 4. The choices… Access Methods Solution Benefits Drawbacks The Web Mobile Sub Site Separate navigation, site Two site maps map and page content. Search Engines Create a separate site May need to purchase alongside the existing site to Easy to implement reusing additional device data serve mobile optimised existing skills, hosting and Other Sites from 51Degress.mobi content. content.Which Banner Adsaccess Printed Media Responsive Design Single screen to rule all. New skills needed. For example; different Could break existing site. Enhance existing site so that itmethods Web Address dynamically changes to menu formats, or switching Complexity between column or row support mobile. content layout. Standards not ratified.do you QR Codesrequire? Native/Hybrid Different versions of the application needed for Applications Essential for high end Apple, Android, Windows, Application Create a program that runs gaming. Blackberry, etc. Stores on the mobile device Works without a network Requires continued independent of the browser connection. maintenance as platforms or internet. change.
  5. 5. The rest of the story… Solution Time to build Ease of delivery Cost Summary solutionMobile Sub Site Typically less than a Simple to test using day existing processes and environmentResponsive Design Upfront planning/ Modification to Variable depending testing processes on complexity of and environment site essentialApplication stores Typically more than New testing 2 weeks infrastructure and processes required
  6. 6. Google Chrome playing with user agents… • Select CTRL-Shift J • Select Settings • Select User Agent
  7. 7. Feature overview: Device profiles• Part of building and viewing mobile websites – Used to identify categories of similar devices – Provides better control to detection – Enables preview• Enabled in Site Manager• Provides viewing selection in CMS Desk
  8. 8. ScenarioMOBILE SUB SITES
  9. 9. The web part… 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
  10. 10. ScenarioRESPONSIVE DESIGN
  11. 11. What is responsive design… • Components – Fluid layouts – Fluid images – Media queries • Google recommends responsive design for better SEO! Examples • http://www.ecentricarts.com/ • http://www.newbornfree.com/home • http://www.microsoft.com • Sample corporate site
  12. 12. Getting started… • Depending on your browser you have a couple of options that you can use. – For Firefox you can use the Firesizer utility available at https://addons.mozilla.org/en- US/firefox/addon/firesizer/?src=ss. – For Internet Explorer you can use the Internet Explorer Developer Toolbar available http://www.microsoft.com/en- us/download/details.aspx?id=18359 – For Safari you can use the Resize Safari extension available at http://www.resizesafari.com/
  13. 13. Fluid layouts/images…• Death to the pixel!The new math…Target/Context = result• Use percentages and em to ensure correct scaling div{ Width:80% } img{ max-width: 100% }
  14. 14. CSS Media queries…• Ability to target media (devices) with specific CSS• Target screen sizes with max-width @media screen and (max-width: 600px) { .class { background: #444; } }• Advanced queries with ranges @media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #444; } }• Target device orientation @media screen and (orientation:portrait) { }
  15. 15. Layout mapping…• Replace shared page layouts with device specific shared layouts• You can define – If layout is convertible – Number of web part zones• Automatically layout switch for each device profile – One layout can be mapped for different device profiles differently – Layout mapping is in device profiles UI
  16. 16. Device layout…• Separated layout definition for each device profile• Rearrange web part zones as needed• Ability to copy layout from other profile – Create new device layout based on existing
  17. 17. Conditional layouts• One template to rule them all! – CMSConditionalLayout (V6) • Special layout control • Specify visibility of layout through macro expression – CMSDeviceLayout control (V7) • Designed for device profiles • Based on CMSConditionalLayout control
  18. 18. Extending responsive design with Kentico 7…Responsive Design Mobile layout• Up front design • Can be applied to existing• Heavy CSS Kentico CMS sites• Generates and loads even • Write HTML code as you’re hidden HTML code used to• 25% higher development • Full control over rendered costs HTML code • Generates and loads only what is displayed • Automatic resizing of images based on device
  19. 19. ScenarioAPPLICATION STORES
  20. 20. What are they? • Stored and run locally on the device and have full access to the platform and hardware Native • Obtained from application stored that includes a lead time and approval process before Application deployment • Developed on the default language of their respective platform • Largely based on web technologies running within a native application mimicking the look Hybrid and feel of a native app. • Leverage the device feature to run a web Application application locally
  21. 21. Native apps… • Performance intensive applications • Disconnected or offline apps • Games or apps with rich visuals Best for • Applications requiring heavy interaction with local data or hardware APIs (camera, GPS, etc) • Applications ruining in the background or requiring background processes • Applications targeting a single platform • Absolute best performance and rich UX experience, no visual lag or slowness • Full access to the hardware, capabilities and API’sAdvantages • Marketing boost from app store distribution • Applications that can be tailored to take advantage of platform specific UI paradigm • Most mature, well documented and vendor supported development options • Has to be re-written for each mobile platform • App store approval mandatory • Native application development skills harder to find than web development skillsDisadvantages • Platform vendors take a cut of purchase • Generally the most expensive option • Deployment and updates are slower, more difficult
  22. 22. Hybrid applications… • Applications with basic user interface and functionality • Business applications • Content applications Best for • Wrappers around mobile and web applications • Applications targeting multiple platforms • Applications that won’t be judged on UI speed/performance • Write once, run anywhere – application doesn’t need to be rewritten for each platform • Web development skills easier to find than native development skillsAdvantages • Able to access most hardware and capabilities and APIs • Applications still distribute via App stores • Web based app content can be updated more easily • UI is lowest common denominator between platforms • Write once – debug everywhere – still need to spend time ironing out platform issues • Performance varies between mobile platformsDisadvantages • Applications store approval still mandatory • Platform vendor still takes a cut of revenue • Deployment and upates of the applications (via app store) is still slow and difficult
  23. 23. Short list recommendations… Native applications • Performance intensive applications • Marquee applications that can’t compromise on user experience or performance • Applications for offline or disconnected requirements • Games or applications with rich visuals • Applications that require background processing • Applications requiring heavy interaction with local data or device hardware • Where cost savings and cross platform code sharing is not a goal • Where a single device or platform is targeted Hybrid applications • Work well for business and content applications with a basic user interface and functionality requirements • Targeting multiple platforms • Adding native functionality to existing web applications or creating a native wrapper around a mobile web site • Work well for creating a simple mobile optimized version of an existing site
  24. 24. Questions Thanks! Thomas Robbins, Chief Evangelist thomasr@kentico.com @trobbins

×