Your SlideShare is downloading. ×
Cross Device UI Designing
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Cross Device UI Designing


Published on

To have fun and discuss a few things …

To have fun and discuss a few things

Responsive Web Design
Progressive Enhancements

Published in: Technology

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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. 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. 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. 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. Responsive design ingredients5What is responsive web design?—  Flexible, grid-based layout—  Flexible images and media—  Media queries - a module from the CSS3specification
  • 6. Flexible, grid-based layout6
  • 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. 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. 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. 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. 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. 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. Media queries13
  • 14. 14
  • 15. 15
  • 16. Progressive enhancement approach16—  Writing meaningful markup—  Applying Styles effectively—  Scripting enhancements and interactivity
  • 17. 17Queries ???
  • 18. 18Thank You
  • 19. A D D I T I O N A L I N F O R M A T I O NAppendix
  • 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?•  .......