Kentico Technical Learning - Responsive Design with Kentico CMS 7
-
Upload
thomas-robbins -
Category
Technology
-
view
4.309 -
download
7
description
Transcript of Kentico Technical Learning - Responsive Design with Kentico CMS 7
![Page 1: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/1.jpg)
Kentico Technical Learning Responsive Design with Kentico CMS 7
Thomas Robbins@trobbins
![Page 2: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/2.jpg)
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
![Page 3: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/3.jpg)
Our agenda…
• Scenario: Getting Started with a mobile project
• Scenario: Mobile sub sites• Scenario: jQuery mobile• Scenario: Responsive design• Scenario: Application stored
![Page 4: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/4.jpg)
GETTING STARTED WITH A MOBILE PROJECT
Scenario
![Page 5: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/5.jpg)
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?
![Page 6: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/6.jpg)
Current mobile traffic with EMS…
![Page 7: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/7.jpg)
Current mobile traffic with Google…
![Page 8: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/8.jpg)
The choices…
Solution DrawbacksAccess Methods
Two site maps
Separate navigation, site map and page content.
Easy to implement reusing existing skills, hosting and content.
Mobile Sub Site
Create a separate site alongside the existing site to serve mobile optimised content.
Which
access
methods
do you
require?
New skills needed.
Could break existing site.
Complexity
Standards not ratified.
Single screen to rule all.
For example; different menu formats, or switching between column or row content layout.
Responsive Design
Enhance existing site so that it dynamically changes to support mobile.
The Web
Search Engines
Other Sites
Banner Ads
Printed Media
Web Address
QR Codes
Different versions of the application needed for Apple, Android, Windows, Blackberry, etc.
Requires continued maintenance as platforms change.
Essential for high end gaming.
Works without a network connection.
Native/Hybrid Applications
Create a program that runs on the mobile device independent of the browser or internet.
Application Stores
Benefits
![Page 9: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/9.jpg)
The rest of the story…
Solution Time to build solution Ease of delivery Cost
Mobile Sub Site Typically less than a day
Simple to test using existing processes and environment
Responsive Design Upfront planning/ Variable depending on complexity of site
Modification to testing processes and environment essential
Application stores Typically more than 2 weeks
New testing infrastructure and processes required
Summary
![Page 10: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/10.jpg)
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.
![Page 11: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/11.jpg)
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/
![Page 12: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/12.jpg)
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?
![Page 13: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/13.jpg)
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
![Page 14: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/14.jpg)
Google Chrome playing with user agents…
• Select CTRL-Shift J
• Select Settings
• Select User Agent
![Page 15: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/15.jpg)
MOBILE SUB SITESScenario
![Page 16: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/16.jpg)
The web part…
Detection by user agent from client deviceTwo ways to detect:• Kentico specified XML for user agents
• Out of the box solution• 51degrees.mobi provider
• Automatic updates
![Page 17: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/17.jpg)
JQUERY MOBILEScenario
![Page 18: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/18.jpg)
Worth a look…
Anyone interested in a webinar?
![Page 19: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/19.jpg)
RESPONSIVE DESIGNScenario
![Page 20: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/20.jpg)
Responsive design ISN’T…
• A single technology• A checkbox in Kentico• A magic formula • A quick fix
![Page 21: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/21.jpg)
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
![Page 22: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/22.jpg)
• 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%
}
Fluid layouts/images…
![Page 23: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/23.jpg)
• 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) {}
CSS Media queries…
![Page 24: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/24.jpg)
What’s the market…
![Page 25: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/25.jpg)
So many devices…
3 Layouts
4 Layouts
6 Layouts
Source:http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
![Page 26: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/26.jpg)
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
![Page 27: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/27.jpg)
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
![Page 28: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/28.jpg)
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
![Page 29: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/29.jpg)
Extending responsive design with Kentico 7…
Responsive Design• Up front design • Heavy CSS • Generates and loads even
hidden HTML code• 25% higher development
costs
Mobile layout• Can be applied to existing
Kentico CMS sites• Write HTML code as you’re
used to• Full control over rendered
HTML code• Generates and loads only
what is displayed• Automatic resizing of
images based on device
![Page 30: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/30.jpg)
APPLICATION STORESScenario
![Page 31: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/31.jpg)
What are they?
Native Application
•Stored and run locally on the device and have full access to the platform and hardware•Obtained from application stored that includes a lead time and approval process before deployment•Developed on the default language of their respective platform
Hybrid Application
•Largely based on web technologies running within a native application mimicking the look and feel of a native app.•Leverage the device feature to run a web application locally
![Page 32: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/32.jpg)
Native apps…
• Performance intensive applications• Disconnected or offline apps• Games or apps with rich visuals• 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
Best for
• Absolute best performance and rich UX experience, no visual lag or slowness
• Full access to the hardware, capabilities and API’s• 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
Advantages
• Has to be re-written for each mobile platform• App store approval mandatory• Native application development skills harder to find than web
development skills• Platform vendors take a cut of purchase• Generally the most expensive option• Deployment and updates are slower, more difficult
Disadvantages
![Page 33: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/33.jpg)
Hybrid applications…
• Applications with basic user interface and functionality• Business applications• Content applications• Wrappers around mobile and web applications• Applications targeting multiple platforms• Applications that won’t be judged on UI speed/performance
Best for
• Write once, run anywhere – application doesn’t need to be rewritten for each platform
• Web development skills easier to find than native development skills • Able to access most hardware and capabilities and APIs• Applications still distribute via App stores• Web based app content can be updated more easily
Advantages
• 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• 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
Disadvantages
![Page 34: Kentico Technical Learning - Responsive Design with Kentico CMS 7](https://reader035.fdocuments.in/reader035/viewer/2022062307/5556102ad8b42ae0238b4b4b/html5/thumbnails/34.jpg)
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