SlideShare a Scribd company logo
1 of 35
Kentico Technical Learning
Responsive Design with Kentico CMS 7
 Thomas Robbins
 @trobbins
The rise of mobile..

                A few stand out stats:
                • There are currently projected over 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 mobile 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
Our agenda…


• Scenario: Getting Started with a mobile
  project
• Scenario: Mobile sub sites
• Scenario: jQuery mobile
• Scenario: Responsive design
• Scenario: Application stored
Scenario

GETTING STARTED WITH A MOBILE
PROJECT
Starter questions…

• What’s your current
  mobile statistics?
• What’s your timeline and
  budget?
• Who is your target
  audience?
• Is there a target platform?
• What are the application
  features and
  functionality?
• What are the developer
  skills?
Current mobile traffic with EMS…
Current mobile traffic with Google…
The choices…

            Access Methods        Solution                           Benefits                   Drawbacks

            The Web          Mobile Sub Site                    Separate navigation, site
                                                                map and page content.
            Search Engines   Create a separate site
                             alongside the existing site to     Easy to implement reusing      Two site maps
                             serve mobile optimised             existing skills, hosting and
            Other Sites      content.                           content.
 Which      Banner Ads

 access     Printed Media    Responsive Design
                                                                Single screen to rule all.     New skills needed.
                                                                For example; different         Could break existing site.
                             Enhance existing site so that it
 methods    Web Address      dynamically changes to
                                                                menu formats, or switching
                                                                                               Complexity
                                                                between column or row
                             support mobile.                    content layout.                Standards not ratified.
 do you     QR Codes

 require?                    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.
The rest of the story…

      Solution           Time to build         Ease of delivery     Cost   Summary
                           solution
Mobile Sub Site      Typically less than a   Simple to test using
                     day                     existing processes
                                             and environment


Responsive Design    Upfront planning/       Modification to
                     Variable depending      testing processes
                     on complexity of        and environment
                     site                    essential

Application stores   Typically more than     New testing
                     2 weeks                 infrastructure and
                                             processes required
Generic mobile requirements checklist…

                  • Is it readable?
                      – Consider how easy it is to read text in
                        columns at various widths and page
                        sizes.
                  • Is it visible?
                      – Make sure all the key information is
                        above the fold to prevent scrolling.
                      – Strike the proper balance between
                        number of display items and detail
                        level.
                  • Is it usable?
                      – Consider the page look when the
                        page elements are at the proper size
                        and location for a screen size.
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/
Other places…



                                  •   Responsive Design Bookmarklet
                                       –   http://responsive.victorcoulon.fr/




                                  •   Studio Press by Copyblogger
                                       –   http://www.studiopress.com/responsive/



          These are just a few places… Any others?
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




• Managed in Site manager

• Provides viewing selection in CMS Desk
Google Chrome playing with user agents…

                      • Select CTRL-Shift J




                      • Select Settings



                      • Select User Agent
Scenario

MOBILE SUB SITES
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
Scenario

JQUERY MOBILE
Worth a look…




                Anyone interested in a webinar?
Scenario

RESPONSIVE DESIGN
Responsive design ISN’T…




          •   A single technology
          •   A checkbox in Kentico
          •   A magic formula
          •   A quick fix
Responsive design IS…

                  • 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
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%
     }
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) {
      }
What’s the market…
So many devices…


3 Layouts




4 Layouts




6 Layouts



 Source:
 http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
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
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
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
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
Scenario

APPLICATION STORES
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
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’s
Advantages      • 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 skills
Disadvantages   • Platform vendors take a cut of purchase
                • Generally the most expensive option
                • Deployment and updates are slower, more difficult
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 skills
Advantages      • 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 platforms
Disadvantages   • 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
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
Questions




                  Thanks!
            Thomas Robbins, Chief Evangelist
                thomasr@kentico.com
                     @trobbins

More Related Content

What's hot

Toura General Presentation
Toura General PresentationToura General Presentation
Toura General PresentationToura
 
appsnack mobileoverview
appsnack mobileoverviewappsnack mobileoverview
appsnack mobileoverviewMatthew Kent
 
IBM Worklight Slides
IBM Worklight SlidesIBM Worklight Slides
IBM Worklight SlidesJim Porter
 
Will apps replace the web? (or, why webhub.mobi?) - 6.8.2012
Will apps replace the web? (or, why webhub.mobi?) - 6.8.2012Will apps replace the web? (or, why webhub.mobi?) - 6.8.2012
Will apps replace the web? (or, why webhub.mobi?) - 6.8.2012www.webhub.mobi by Yuvee, Inc.
 
architecture of mobile software applications
architecture of mobile software applicationsarchitecture of mobile software applications
architecture of mobile software applicationsHassan Dar
 
IBM Mobile strategy for Social Business - May 2012
IBM Mobile strategy for Social Business - May 2012IBM Mobile strategy for Social Business - May 2012
IBM Mobile strategy for Social Business - May 2012Ed Brill
 
Adobe MAX 2009: Design Considerations for Contextually Aware Solutions
Adobe MAX 2009: Design Considerations for Contextually Aware SolutionsAdobe MAX 2009: Design Considerations for Contextually Aware Solutions
Adobe MAX 2009: Design Considerations for Contextually Aware SolutionsAli Ivmark
 
SDL Rich Media based Campaign Management
SDL Rich Media based Campaign ManagementSDL Rich Media based Campaign Management
SDL Rich Media based Campaign Managementwmaagdenberg
 
2012 Breakthrough Austin : Zumobi
2012 Breakthrough Austin : Zumobi2012 Breakthrough Austin : Zumobi
2012 Breakthrough Austin : ZumobiiMedia Connection
 
NewsHarvest Gap Analysis
NewsHarvest Gap AnalysisNewsHarvest Gap Analysis
NewsHarvest Gap Analysiskimmyccs
 
Real-world Dojo Mobile
Real-world Dojo MobileReal-world Dojo Mobile
Real-world Dojo MobileAndrew Ferrier
 
IBM Mobile Strategy - Mobile World Congress 2012
IBM Mobile Strategy - Mobile World Congress 2012IBM Mobile Strategy - Mobile World Congress 2012
IBM Mobile Strategy - Mobile World Congress 2012Robert Sutor
 
Keynote Systems - Mobile Solutions Overview Presentation
Keynote Systems - Mobile Solutions Overview PresentationKeynote Systems - Mobile Solutions Overview Presentation
Keynote Systems - Mobile Solutions Overview Presentationvprathap
 
Customer experience suite townsville
Customer experience suite   townsvilleCustomer experience suite   townsville
Customer experience suite townsvilleMike Handes
 
Layar introduction for developers
Layar introduction for developersLayar introduction for developers
Layar introduction for developersLayar
 
How to Enable Unified Push Notifications in Native and HTML5 Hybrid Mobile Apps
How to Enable Unified Push Notifications in Native and HTML5 Hybrid Mobile AppsHow to Enable Unified Push Notifications in Native and HTML5 Hybrid Mobile Apps
How to Enable Unified Push Notifications in Native and HTML5 Hybrid Mobile AppsWorklight
 

What's hot (20)

Toura General Presentation
Toura General PresentationToura General Presentation
Toura General Presentation
 
appsnack mobileoverview
appsnack mobileoverviewappsnack mobileoverview
appsnack mobileoverview
 
IBM Worklight Slides
IBM Worklight SlidesIBM Worklight Slides
IBM Worklight Slides
 
Will apps replace the web? (or, why webhub.mobi?) - 6.8.2012
Will apps replace the web? (or, why webhub.mobi?) - 6.8.2012Will apps replace the web? (or, why webhub.mobi?) - 6.8.2012
Will apps replace the web? (or, why webhub.mobi?) - 6.8.2012
 
X Summit: Super Producer
X Summit: Super ProducerX Summit: Super Producer
X Summit: Super Producer
 
architecture of mobile software applications
architecture of mobile software applicationsarchitecture of mobile software applications
architecture of mobile software applications
 
IBM Mobile strategy for Social Business - May 2012
IBM Mobile strategy for Social Business - May 2012IBM Mobile strategy for Social Business - May 2012
IBM Mobile strategy for Social Business - May 2012
 
Adobe MAX 2009: Design Considerations for Contextually Aware Solutions
Adobe MAX 2009: Design Considerations for Contextually Aware SolutionsAdobe MAX 2009: Design Considerations for Contextually Aware Solutions
Adobe MAX 2009: Design Considerations for Contextually Aware Solutions
 
SDL Rich Media based Campaign Management
SDL Rich Media based Campaign ManagementSDL Rich Media based Campaign Management
SDL Rich Media based Campaign Management
 
2012 Breakthrough Austin : Zumobi
2012 Breakthrough Austin : Zumobi2012 Breakthrough Austin : Zumobi
2012 Breakthrough Austin : Zumobi
 
Flex User Group breton
Flex User Group bretonFlex User Group breton
Flex User Group breton
 
NewsHarvest Gap Analysis
NewsHarvest Gap AnalysisNewsHarvest Gap Analysis
NewsHarvest Gap Analysis
 
Real-world Dojo Mobile
Real-world Dojo MobileReal-world Dojo Mobile
Real-world Dojo Mobile
 
eBrochure Kit
eBrochure KiteBrochure Kit
eBrochure Kit
 
IBM Mobile Strategy - Mobile World Congress 2012
IBM Mobile Strategy - Mobile World Congress 2012IBM Mobile Strategy - Mobile World Congress 2012
IBM Mobile Strategy - Mobile World Congress 2012
 
IBM Mobile Strategy
IBM Mobile StrategyIBM Mobile Strategy
IBM Mobile Strategy
 
Keynote Systems - Mobile Solutions Overview Presentation
Keynote Systems - Mobile Solutions Overview PresentationKeynote Systems - Mobile Solutions Overview Presentation
Keynote Systems - Mobile Solutions Overview Presentation
 
Customer experience suite townsville
Customer experience suite   townsvilleCustomer experience suite   townsville
Customer experience suite townsville
 
Layar introduction for developers
Layar introduction for developersLayar introduction for developers
Layar introduction for developers
 
How to Enable Unified Push Notifications in Native and HTML5 Hybrid Mobile Apps
How to Enable Unified Push Notifications in Native and HTML5 Hybrid Mobile AppsHow to Enable Unified Push Notifications in Native and HTML5 Hybrid Mobile Apps
How to Enable Unified Push Notifications in Native and HTML5 Hybrid Mobile Apps
 

Similar to Kentico Technical Learning - Responsive Design with Kentico CMS 7

Designing for mobile user experience
Designing for mobile user experienceDesigning for mobile user experience
Designing for mobile user experienceSameer Chavan
 
Seminar: Putting Mobile First
Seminar: Putting Mobile FirstSeminar: Putting Mobile First
Seminar: Putting Mobile FirstPrecedent
 
Putting Mobile First
Putting Mobile FirstPutting Mobile First
Putting Mobile FirstPrecedent
 
digital marketing[1].pdf
digital marketing[1].pdfdigital marketing[1].pdf
digital marketing[1].pdfTECHCENTRAL3
 
Consider Starting Small
Consider Starting SmallConsider Starting Small
Consider Starting SmallAndrew Smith
 
Mobile web apps design
Mobile web apps designMobile web apps design
Mobile web apps designvictorpanaite
 
Performance testing – mobile apps session1
Performance testing – mobile apps   session1Performance testing – mobile apps   session1
Performance testing – mobile apps session1Jyothirmayee Pola
 
Performance testing – mobile apps session1
Performance testing – mobile apps   session1Performance testing – mobile apps   session1
Performance testing – mobile apps session1Jyothirmayee Pola
 
W3C Mobile Web technologies
W3C Mobile Web technologiesW3C Mobile Web technologies
W3C Mobile Web technologiesRobin Berjon
 
User Focus 2014 - Choosing The Right Mobile Approach
User Focus 2014 - Choosing The Right Mobile ApproachUser Focus 2014 - Choosing The Right Mobile Approach
User Focus 2014 - Choosing The Right Mobile ApproachJasper Liu
 
Navigating the Mobile maze
Navigating the Mobile mazeNavigating the Mobile maze
Navigating the Mobile mazePraveen Bohra
 
Codestrong 2012 breakout session mobile platform and infrastructure
Codestrong 2012 breakout session   mobile platform and infrastructureCodestrong 2012 breakout session   mobile platform and infrastructure
Codestrong 2012 breakout session mobile platform and infrastructureAxway Appcelerator
 
Mobile Joomla Stragies & Techniques
Mobile Joomla Stragies & TechniquesMobile Joomla Stragies & Techniques
Mobile Joomla Stragies & TechniquesCory Webb
 
Mobile Endgeräte sind überall – deshalb das mobile Portal
Mobile Endgeräte sind überall – deshalb das mobile Portal Mobile Endgeräte sind überall – deshalb das mobile Portal
Mobile Endgeräte sind überall – deshalb das mobile Portal IBM Lotus
 
Responsive Web Design - Advantages and Best Practice for Sports Direct
Responsive Web Design - Advantages and Best Practice for Sports DirectResponsive Web Design - Advantages and Best Practice for Sports Direct
Responsive Web Design - Advantages and Best Practice for Sports DirectCantarus
 

Similar to Kentico Technical Learning - Responsive Design with Kentico CMS 7 (20)

Designing for mobile user experience
Designing for mobile user experienceDesigning for mobile user experience
Designing for mobile user experience
 
Presentation1
Presentation1Presentation1
Presentation1
 
Presentation1
Presentation1Presentation1
Presentation1
 
Presentation1
Presentation1Presentation1
Presentation1
 
Seminar: Putting Mobile First
Seminar: Putting Mobile FirstSeminar: Putting Mobile First
Seminar: Putting Mobile First
 
Putting Mobile First
Putting Mobile FirstPutting Mobile First
Putting Mobile First
 
digital marketing[1].pdf
digital marketing[1].pdfdigital marketing[1].pdf
digital marketing[1].pdf
 
Consider Starting Small
Consider Starting SmallConsider Starting Small
Consider Starting Small
 
Designing Mobile Applications
Designing Mobile ApplicationsDesigning Mobile Applications
Designing Mobile Applications
 
Mobile web apps design
Mobile web apps designMobile web apps design
Mobile web apps design
 
Performance testing – mobile apps session1
Performance testing – mobile apps   session1Performance testing – mobile apps   session1
Performance testing – mobile apps session1
 
Performance testing – mobile apps session1
Performance testing – mobile apps   session1Performance testing – mobile apps   session1
Performance testing – mobile apps session1
 
App and/or Mobile Web
App and/or Mobile WebApp and/or Mobile Web
App and/or Mobile Web
 
W3C Mobile Web technologies
W3C Mobile Web technologiesW3C Mobile Web technologies
W3C Mobile Web technologies
 
User Focus 2014 - Choosing The Right Mobile Approach
User Focus 2014 - Choosing The Right Mobile ApproachUser Focus 2014 - Choosing The Right Mobile Approach
User Focus 2014 - Choosing The Right Mobile Approach
 
Navigating the Mobile maze
Navigating the Mobile mazeNavigating the Mobile maze
Navigating the Mobile maze
 
Codestrong 2012 breakout session mobile platform and infrastructure
Codestrong 2012 breakout session   mobile platform and infrastructureCodestrong 2012 breakout session   mobile platform and infrastructure
Codestrong 2012 breakout session mobile platform and infrastructure
 
Mobile Joomla Stragies & Techniques
Mobile Joomla Stragies & TechniquesMobile Joomla Stragies & Techniques
Mobile Joomla Stragies & Techniques
 
Mobile Endgeräte sind überall – deshalb das mobile Portal
Mobile Endgeräte sind überall – deshalb das mobile Portal Mobile Endgeräte sind überall – deshalb das mobile Portal
Mobile Endgeräte sind überall – deshalb das mobile Portal
 
Responsive Web Design - Advantages and Best Practice for Sports Direct
Responsive Web Design - Advantages and Best Practice for Sports DirectResponsive Web Design - Advantages and Best Practice for Sports Direct
Responsive Web Design - Advantages and Best Practice for Sports Direct
 

More from Thomas Robbins

PlayFab Advanced Cloud Script
PlayFab Advanced Cloud ScriptPlayFab Advanced Cloud Script
PlayFab Advanced Cloud ScriptThomas Robbins
 
What’s in the box? Creating chance mechanics and rewards
What’s in the box? Creating chance mechanics and rewardsWhat’s in the box? Creating chance mechanics and rewards
What’s in the box? Creating chance mechanics and rewardsThomas Robbins
 
Getting started with Cloud Script
Getting started with Cloud ScriptGetting started with Cloud Script
Getting started with Cloud ScriptThomas Robbins
 
Say hello to the new PlayFab!
Say hello to the new PlayFab!Say hello to the new PlayFab!
Say hello to the new PlayFab!Thomas Robbins
 
Data-Driven Government: Explore the Four Pillars of Value
Data-Driven Government: Explore the Four Pillars of ValueData-Driven Government: Explore the Four Pillars of Value
Data-Driven Government: Explore the Four Pillars of ValueThomas Robbins
 
Financial Transparency Trailblazers
Financial Transparency TrailblazersFinancial Transparency Trailblazers
Financial Transparency TrailblazersThomas Robbins
 
Telling Stories with Open Data
Telling Stories with Open DataTelling Stories with Open Data
Telling Stories with Open DataThomas Robbins
 
Socrata Financial Transparency Suite
Socrata Financial Transparency Suite Socrata Financial Transparency Suite
Socrata Financial Transparency Suite Thomas Robbins
 
Socrata Service Connect
Socrata Service ConnectSocrata Service Connect
Socrata Service ConnectThomas Robbins
 
Leveraging Data to Engage Citizens and Drive Innovation
Leveraging Data to Engage Citizens and Drive InnovationLeveraging Data to Engage Citizens and Drive Innovation
Leveraging Data to Engage Citizens and Drive InnovationThomas Robbins
 
Using MVC with Kentico 8
Using MVC with Kentico 8Using MVC with Kentico 8
Using MVC with Kentico 8Thomas Robbins
 
Say hello to Kentico 8! Your integrated marketing solution has arrived
Say hello to Kentico 8! Your integrated marketing solution has arrivedSay hello to Kentico 8! Your integrated marketing solution has arrived
Say hello to Kentico 8! Your integrated marketing solution has arrivedThomas Robbins
 
One Size does Not Fit All: Selecting the Right Mobile StrategyKentico mobil...
One Size does Not Fit All: Selecting the Right Mobile StrategyKentico   mobil...One Size does Not Fit All: Selecting the Right Mobile StrategyKentico   mobil...
One Size does Not Fit All: Selecting the Right Mobile StrategyKentico mobil...Thomas Robbins
 
Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013Thomas Robbins
 
Digital marketing best practices
Digital marketing best practices Digital marketing best practices
Digital marketing best practices Thomas Robbins
 
Do you speak digital marketing with Kentico CMS?
Do you speak digital marketing with Kentico CMS?Do you speak digital marketing with Kentico CMS?
Do you speak digital marketing with Kentico CMS?Thomas Robbins
 
Common questions for Windows Azure and Kentico CMS
Common questions for Windows Azure and Kentico CMSCommon questions for Windows Azure and Kentico CMS
Common questions for Windows Azure and Kentico CMSThomas Robbins
 
Advanced development with Windows Azure
Advanced development with Windows AzureAdvanced development with Windows Azure
Advanced development with Windows AzureThomas Robbins
 
Best Practices for Kentico CMS and Windows Azure
Best Practices for Kentico CMS and Windows AzureBest Practices for Kentico CMS and Windows Azure
Best Practices for Kentico CMS and Windows AzureThomas Robbins
 

More from Thomas Robbins (20)

PlayFab Advanced Cloud Script
PlayFab Advanced Cloud ScriptPlayFab Advanced Cloud Script
PlayFab Advanced Cloud Script
 
What’s in the box? Creating chance mechanics and rewards
What’s in the box? Creating chance mechanics and rewardsWhat’s in the box? Creating chance mechanics and rewards
What’s in the box? Creating chance mechanics and rewards
 
Getting started with Cloud Script
Getting started with Cloud ScriptGetting started with Cloud Script
Getting started with Cloud Script
 
Say hello to the new PlayFab!
Say hello to the new PlayFab!Say hello to the new PlayFab!
Say hello to the new PlayFab!
 
Data-Driven Government: Explore the Four Pillars of Value
Data-Driven Government: Explore the Four Pillars of ValueData-Driven Government: Explore the Four Pillars of Value
Data-Driven Government: Explore the Four Pillars of Value
 
Financial Transparency Trailblazers
Financial Transparency TrailblazersFinancial Transparency Trailblazers
Financial Transparency Trailblazers
 
Telling Stories with Open Data
Telling Stories with Open DataTelling Stories with Open Data
Telling Stories with Open Data
 
Socrata Financial Transparency Suite
Socrata Financial Transparency Suite Socrata Financial Transparency Suite
Socrata Financial Transparency Suite
 
Socrata Service Connect
Socrata Service ConnectSocrata Service Connect
Socrata Service Connect
 
Leveraging Data to Engage Citizens and Drive Innovation
Leveraging Data to Engage Citizens and Drive InnovationLeveraging Data to Engage Citizens and Drive Innovation
Leveraging Data to Engage Citizens and Drive Innovation
 
Using MVC with Kentico 8
Using MVC with Kentico 8Using MVC with Kentico 8
Using MVC with Kentico 8
 
Here Comes Kentico 8
Here Comes Kentico 8Here Comes Kentico 8
Here Comes Kentico 8
 
Say hello to Kentico 8! Your integrated marketing solution has arrived
Say hello to Kentico 8! Your integrated marketing solution has arrivedSay hello to Kentico 8! Your integrated marketing solution has arrived
Say hello to Kentico 8! Your integrated marketing solution has arrived
 
One Size does Not Fit All: Selecting the Right Mobile StrategyKentico mobil...
One Size does Not Fit All: Selecting the Right Mobile StrategyKentico   mobil...One Size does Not Fit All: Selecting the Right Mobile StrategyKentico   mobil...
One Size does Not Fit All: Selecting the Right Mobile StrategyKentico mobil...
 
Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013
 
Digital marketing best practices
Digital marketing best practices Digital marketing best practices
Digital marketing best practices
 
Do you speak digital marketing with Kentico CMS?
Do you speak digital marketing with Kentico CMS?Do you speak digital marketing with Kentico CMS?
Do you speak digital marketing with Kentico CMS?
 
Common questions for Windows Azure and Kentico CMS
Common questions for Windows Azure and Kentico CMSCommon questions for Windows Azure and Kentico CMS
Common questions for Windows Azure and Kentico CMS
 
Advanced development with Windows Azure
Advanced development with Windows AzureAdvanced development with Windows Azure
Advanced development with Windows Azure
 
Best Practices for Kentico CMS and Windows Azure
Best Practices for Kentico CMS and Windows AzureBest Practices for Kentico CMS and Windows Azure
Best Practices for Kentico CMS and Windows Azure
 

Recently uploaded

Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 

Recently uploaded (20)

Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 

Kentico Technical Learning - Responsive Design with Kentico CMS 7

  • 1. Kentico Technical Learning Responsive Design with Kentico CMS 7 Thomas Robbins @trobbins
  • 2. The rise of mobile.. A few stand out stats: • There are currently projected over 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 mobile 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. Our agenda… • Scenario: Getting Started with a mobile project • Scenario: Mobile sub sites • Scenario: jQuery mobile • Scenario: Responsive design • Scenario: Application stored
  • 4. Scenario GETTING STARTED WITH A MOBILE PROJECT
  • 5. Starter questions… • What’s your current mobile statistics? • What’s your timeline and budget? • Who is your target audience? • Is there a target platform? • What are the application features and functionality? • What are the developer skills?
  • 7. Current mobile traffic with Google…
  • 8. The choices… Access Methods Solution Benefits Drawbacks The Web Mobile Sub Site Separate navigation, site map and page content. Search Engines Create a separate site alongside the existing site to Easy to implement reusing Two site maps serve mobile optimised existing skills, hosting and Other Sites content. content. Which Banner Ads access Printed Media Responsive Design Single screen to rule all. New skills needed. For example; different Could break existing site. Enhance existing site so that it methods Web Address dynamically changes to menu formats, or switching Complexity between column or row support mobile. content layout. Standards not ratified. do you QR Codes require? 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.
  • 9. The rest of the story… Solution Time to build Ease of delivery Cost Summary solution Mobile Sub Site Typically less than a Simple to test using day existing processes and environment Responsive Design Upfront planning/ Modification to Variable depending testing processes on complexity of and environment site essential Application stores Typically more than New testing 2 weeks infrastructure and processes required
  • 10. Generic mobile requirements checklist… • Is it readable? – Consider how easy it is to read text in columns at various widths and page sizes. • Is it visible? – Make sure all the key information is above the fold to prevent scrolling. – Strike the proper balance between number of display items and detail level. • Is it usable? – Consider the page look when the page elements are at the proper size and location for a screen size.
  • 11. 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/
  • 12. Other places… • Responsive Design Bookmarklet – http://responsive.victorcoulon.fr/ • Studio Press by Copyblogger – http://www.studiopress.com/responsive/ These are just a few places… Any others?
  • 13. 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 • Managed in Site manager • Provides viewing selection in CMS Desk
  • 14. Google Chrome playing with user agents… • Select CTRL-Shift J • Select Settings • Select User Agent
  • 16. 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
  • 18. Worth a look… Anyone interested in a webinar?
  • 20. Responsive design ISN’T… • A single technology • A checkbox in Kentico • A magic formula • A quick fix
  • 21. Responsive design IS… • 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
  • 22. 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% }
  • 23. 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) { }
  • 25. So many devices… 3 Layouts 4 Layouts 6 Layouts Source: http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. 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
  • 31. 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
  • 32. 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’s Advantages • 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 skills Disadvantages • Platform vendors take a cut of purchase • Generally the most expensive option • Deployment and updates are slower, more difficult
  • 33. 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 skills Advantages • 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 platforms Disadvantages • 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
  • 34. 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
  • 35. Questions Thanks! Thomas Robbins, Chief Evangelist thomasr@kentico.com @trobbins

Editor's Notes

  1. C:\\inetpub\\wwwroot\\KenticoCMS7\\App_Data\\CMSModules\\DeviceProfile