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

455
views

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
455
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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?•  .......