Is your website ready for Responsive Design? Thomas RobbinsChief Evangelist Kentico CMS @trobbins

Who are we?

Kentico CMS is one of the most powerful Customer Experience Management Systems and Content Management Systems on the planet. With over 16,000 web sites in 90 countries and backed by a partner network of over 1,200 it is used for everything from simple web sites to complex applications.

Kentico CMS is easy to install, simple to manage and reliable.

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

A new world…

Our agenda…

• Scenario: Getting Started with a mobile project

• Scenario: Mobile sub sites• Scenario: jQuery mobile• Scenario: Responsive design• Scenario: Application stores

GETTING STARTED WITH A MOBILE PROJECT

Scenario

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 Google…

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

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

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?

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.

Google Chrome playing with user agents…

• Select F12 /CTRL-Shift J

• Select Settings

• Select User Agent

MOBILE SUB SITESScenario

Content redirection to the rescue…

“Device Detection Data is the missing ingredient that can turn any standard web site into a tailor-made experience for mobile phones and devices. It lets any organisation deliver an online customer experience with optimised browsing, easier transactions and faster page loading.”

51Degrees.mobi

JQUERY MOBILEScenario

Worth a look…

http://jquerymobile.com/

RESPONSIVE DESIGNScenario

Responsive design ISN’T…

• A single technology• A magic formula • A quick fix• Easy

Can you say planning!

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

• 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…

• 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…

So many devices…

3 Layouts

4 Layouts

6 Layouts

Source:http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning

Need help: Twitter Bootstrap

http://twitter.github.com/bootstrap/

Bootstrap Features: Grid System

• Examples

Bootstrap Features: Components (CSS)

• Buttons:

Tabs:

Breadcrumb:

Pagination:

Alerts:

Progress bar:

Bootstrap Features: JavaScript

Bootstrap Features: Customization

• CSS Components

Bootstrap Features: Customization

• JavaScript (JQuery)

APPLICATION STORESScenario

What’s the market…

What are they?

• 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

Native 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

Hybrid Application

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

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

Short list recommendations…

• 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

Native 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

Hybrid applications

Questions

Thanks!Thomas Robbins, Chief Evangelist

thomasr@kentico.com@trobbins

http://devnet.kentico.com/Blogs/Thomas-Robbins.aspxBlog: