Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cross Device UI Designing


Published on

To have fun and discuss a few things

Responsive Web Design
Progressive Enhancements

Published in: Technology
  • Be the first to comment

Cross Device UI Designing

  1. 1. B YR A J K U M A R J E Y A R A JU S T G L O B A LWOW !! It’s so easyà Cross Device UI Designing
  2. 2. TO HAVE FUN A N D D I S C U S S A F E W T H I N G S•  R E S P O N S I V E W E B D E S I G N•  P R O G R E S S I V E E N H A N C E M E N T S2Agenda
  3. 3. Smartphones Will Dominate Handsets300.5 bn1 bn1.5 bn2 bn2013 2014 2015 2016PredictedsmartphoneshipmentsAndroidiOSWindowsRIMOtherSmartphones willbe 52% total globalhandset shipmentsSmartphones willbe 78% total globalhandset shipmentsThe rise ofsmartphones
  4. 4. Mobile Technology Trends 2013 and 20144•  Diversity: 27" tablets, 4K tablets, "phablets", transformables•  Windows 8 and touch ultrabooks blur tablets & PCs•  "Smartphone" and "feature phone" distinctions blur•  8 Core asymmetric processors•  Curved screens & flexible OLED screens emerge slowly•  OS evolution continues at a high rate on all platforms•  Android will have the widest price and performance range,$40 - $50 smartphones in 2014•  User interfaces get more sophisticated
  5. 5. Responsive design ingredients5What is responsive web design?—  Flexible, grid-based layout—  Flexible images and media—  Media queries - a module from the CSS3specification
  6. 6. Flexible, grid-based layout6
  7. 7. Flexible, grid-based layout7—  Convert font-size from px to em—  target ÷ context = result—  Eg. Current font size by base font size 24/16 = 1.5em—  Layout - From pixels to percentages—  Containers, margins and padding—  Eg. Margin – 45px by container 900 px—  45 ÷ 900 = 0.05 à 5%
  8. 8. Flexible images and media8—  Fluid images - resize the images proportionally—  Container resizes - img { max-width: 100%;}—  img, object, embed, video { max-width: 100%;}—  IE6 width à img.full, object.full { width: 100%;}—  .logo { background: none; filter:progid:DXImageTransform.Microsoft. »AlphaImageLoader(src="/path/to/logo.png", »sizingMethod="scale/crop");}
  9. 9. Flexible images and media9—  .blog { background: #F8F5F2url("blog-bg.png")repeat-y 63.11% 0; /* 568px / 900px */ }—  CSS3 property - background-size—  jQuery Backstretch plug-in—  Crop the excess: overflow: hidden;—  Multiple versions of your infographic
  10. 10. Media queries10—  CSS2 - media types : all, braille, embossed, handheld, print,projection, screen, speech, tty, and tvE.g.<link rel="stylesheet" href="global.css” media="all" /><link rel="stylesheet" href="main.css" media="screen" /><link rel="stylesheet" href="paper.css" media="print" />—  @media screen { body { font-size: 100%; }}—  @media print { body { font-size: 15pt; }}—  Handheld - ???—  Early mobile browsers à mobile browser choose screen
  11. 11. Media queries11—  CSS3 – Media queries—  @media screen and (min-width: 1024px)<link rel="stylesheet" href="wide.css" media="screenand (min-width: 1024px)" />OR@import url("wide.css") screen and (min-width:1024px);
  12. 12. Media queries12—  Features—  “display area” and “rendering surface” - ???—  Browser’s viewport is the display area—  Entire display is the rendering surface—  To test threshold values – some features accept min-and max- prefixes
  13. 13. Media queries13
  14. 14. 14
  15. 15. 15
  16. 16. Progressive enhancement approach16—  Writing meaningful markup—  Applying Styles effectively—  Scripting enhancements and interactivity
  17. 17. 17Queries ???
  18. 18. 18Thank You
  19. 19. A D D I T I O N A L I N F O R M A T I O NAppendix
  20. 20. Mobile AD Tool ProliferationOne Tool is Seldom Enough20GoogleNative SDKsHTML5 FrameworksAll in 1 solutionsLow-cost disruptorsMegavendorsApple MicrosoftSencha JQMAppceleratorXamarinAntenna KonyLightweight toolsOracle SAPCatavolt WebaloIBM•  HTML, Hybrid ornative?•  Vendor viability?•  Cost / licensing?•  Strategic or tacticalapp?•  Support?•  Ecosystem strength?•  Cloud services?•  Vertical capability?•  Skills & sourcing?•  IDE & tooling?•  Integration?•  .......