Kentico Technical LearningResponsive Design with Kentico CMS 7 Thomas Robbins @trobbins
The rise of mobile..                A few stand out stats:                • There are currently projected over 6 Billion  ...
Our agenda…• Scenario: Getting Started with a mobile  project• Scenario: Mobile sub sites• Scenario: jQuery mobile• Scenar...
ScenarioGETTING STARTED WITH A MOBILEPROJECT
Starter questions…• What’s your current  mobile statistics?• What’s your timeline and  budget?• Who is your target  audien...
Current mobile traffic with EMS…
Current mobile traffic with Google…
The choices…            Access Methods        Solution                           Benefits                   Drawbacks     ...
The rest of the story…      Solution           Time to build         Ease of delivery     Cost   Summary                  ...
Generic mobile requirements checklist…                  • Is it readable?                      – Consider how easy it is t...
Getting started…                   • Depending on your browser you                     have a couple of options that you  ...
Other places…                                  •   Responsive Design Bookmarklet                                       –  ...
Feature overview: Device profiles• Part of building and viewing mobile websites   – Used to identify categories of similar...
Google Chrome playing with user agents…                      • Select CTRL-Shift J                      • Select Settings ...
ScenarioMOBILE SUB SITES
The web part…                Detection by user agent from client device                Two ways to detect:                ...
ScenarioJQUERY MOBILE
Worth a look…                Anyone interested in a webinar?
ScenarioRESPONSIVE DESIGN
Responsive design ISN’T…          •   A single technology          •   A checkbox in Kentico          •   A magic formula ...
Responsive design IS…                  • Components                        – Fluid layouts                        – Fluid ...
Fluid layouts/images…• Death to the pixel!The new math…Target/Context = result• Use percentages and em to ensure correct s...
CSS Media queries…• Ability to target media (devices) with specific CSS• Target screen sizes with max-width      @media sc...
What’s the market…
So many devices…3 Layouts4 Layouts6 Layouts Source: http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-...
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 ...
Conditional layouts  • One template to rule them all!     – CMSConditionalLayout (V6)         • Special layout control    ...
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         ...
Upcoming SlideShare
Loading in...5
×

Kentico Technical Learning - Responsive Design with Kentico CMS 7

4,409

Published on

It’s not hard to see that your laptop computer isn’t the only piece of hardware that has a web browser. The web is on your phone, your tablet, your laptop and even your television. Web pages that take the multi-platform world into account are using Responsive Web Design (RWD). As we saw in a previous webinar, this is a set of techniques and ideas that look to adapt layouts based on the environment of the user’s browser. In this webinar Thom Robbins, Kentico CMS Chief Evangelist drilled into the tools and technologies for building a responsive site.

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

  • Be the first to like this

No Downloads
Views
Total Views
4,409
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • C:\\inetpub\\wwwroot\\KenticoCMS7\\App_Data\\CMSModules\\DeviceProfile
  • Kentico Technical Learning - Responsive Design with Kentico CMS 7

    1. 1. Kentico Technical LearningResponsive Design with Kentico CMS 7 Thomas Robbins @trobbins
    2. 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. 3. Our agenda…• Scenario: Getting Started with a mobile project• Scenario: Mobile sub sites• Scenario: jQuery mobile• Scenario: Responsive design• Scenario: Application stored
    4. 4. ScenarioGETTING STARTED WITH A MOBILEPROJECT
    5. 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?
    6. 6. Current mobile traffic with EMS…
    7. 7. Current mobile traffic with Google…
    8. 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. 9. 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
    10. 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. 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. 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. 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. 14. Google Chrome playing with user agents… • Select CTRL-Shift J • Select Settings • Select User Agent
    15. 15. ScenarioMOBILE SUB SITES
    16. 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
    17. 17. ScenarioJQUERY MOBILE
    18. 18. Worth a look… Anyone interested in a webinar?
    19. 19. ScenarioRESPONSIVE DESIGN
    20. 20. Responsive design ISN’T… • A single technology • A checkbox in Kentico • A magic formula • A quick fix
    21. 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. 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. 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) { }
    24. 24. What’s the market…
    25. 25. So many devices…3 Layouts4 Layouts6 Layouts Source: http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
    26. 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. 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. 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. 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
    30. 30. ScenarioAPPLICATION STORES
    31. 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. 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’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
    33. 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 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
    34. 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. 35. Questions Thanks! Thomas Robbins, Chief Evangelist thomasr@kentico.com @trobbins
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×