Is your website ready for Responsive Design?


Published on

Thanks to everyone that attended my session at the South Florida Code Camp!

Massive flat screen TVs, desktop, mobile phones, tablets, netbooks, mini-tablets... Server side device detection is not the only approach available when it comes to servicing the myriad of screen sizes your users could be on. We’ll take a look at responsive web design and the core concepts of making a UI responsive, what tools and frameworks are available now and how best to integrate this approach for your website.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • If you want to implement you application with a left navigation here is the HTML required.You also can nest your columns within columns.
  • Here is a list of some of the CSS component available. There are dozens of them available with bootstrap.
  • Bootstrap gives life to its UI by using Jquery plugins. Here are some examples of great Elements. Once again you have access dozens of them for free.
  • Bootstrap provides a web-based customizer that allow you to generate a CSS file based on your specific needs.
  • Same for the JavaScript plugins. For Mootools fans you can find a Mootools version here:
  • Is your website ready for Responsive Design?

    1. 1. Is your website ready forResponsive Design?Thomas RobbinsChief Evangelist Kentico CMS@trobbins
    2. 2. Who are we?Kentico CMS is one of themost powerful CustomerExperience ManagementSystems and ContentManagement Systems onthe planet. With over16,000 web sites in 90countries and backed by apartner network of over1,200 it is used foreverything from simple websites to complexapplications.Kentico CMS is easy toinstall, simple to manageand reliable.
    3. 3. 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
    4. 4. A new world…
    5. 5. Our agenda…• Scenario: Getting Started with a mobile project• Scenario: Mobile sub sites• Scenario: jQuery mobile• Scenario: Responsive design• Scenario: Application stores
    7. 7. 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?
    8. 8. Current mobile traffic with Google…
    9. 9. 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.
    10. 10. 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
    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 US/firefox/addon/firesizer/?src=ss. – For Internet Explorer you can use the Internet Explorer Developer Toolbar available us/download/details.aspx?id=18359 – For Safari you can use the Resize Safari extension available at
    12. 12. Other places… • Responsive Design Bookmarklet – • Studio Press by Copyblogger – These are just a few places… Any others?
    13. 13. 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.
    14. 14. Google Chrome playing with user agents… • Select F12 /CTRL-Shift J • Select Settings • Select User Agent
    15. 15. ScenarioMOBILE SUB SITES
    16. 16. Content redirection to the rescue…“Device Detection Data is the missing ingredient that can turn any standard web site intoa tailor-made experience for mobile phones and devices. It lets any organisation deliveran online customer experience with optimised browsing, easier transactions and fasterpage loading.”
    17. 17. ScenarioJQUERY MOBILE
    18. 18. Worth a look…
    19. 19. ScenarioRESPONSIVE DESIGN
    20. 20. Responsive design ISN’T… • A single technology • A magic formula • A quick fix • Easy Can you say planning!
    21. 21. Responsive design IS… • Components – Fluid layouts – Fluid images – Media queries • Google recommends responsive design for better SEO! Examples • • •
    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. So many devices…3 Layouts4 Layouts6 Layouts Source:
    25. 25. Need help: Twitter Bootstrap
    26. 26. Bootstrap Features: Grid System• Examples
    27. 27. Bootstrap Features: Components (CSS)• Buttons: Tabs: Breadcrumb: Pagination: Alerts: Progress bar:
    28. 28. Bootstrap Features: JavaScript
    29. 29. Bootstrap Features: Customization• CSS Components
    30. 30. Bootstrap Features: Customization• JavaScript (JQuery)
    31. 31. ScenarioAPPLICATION STORES
    32. 32. What’s the market…
    33. 33. 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
    34. 34. 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
    35. 35. 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
    36. 36. 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
    37. 37. QuestionsBlog: Thanks! Thomas Robbins, Chief Evangelist @trobbins