To have fun and discuss a few things Responsive Web Design Progressive Enhancements

1. B Y
R A J K U M A R J E Y A R A J
U S T G L O B A L
WOW !! 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 S
2
Agenda

3. Smartphones Will Dominate Handsets
3
0
0.5 bn
1 bn
1.5 bn
2 bn
2013 2014 2015 2016
Predictedsmartphoneshipments
Android
iOS
Windows
RIM
Other
Smartphones will
be 52% total global
handset shipments
Smartphones will
be 78% total global
handset shipments
The rise of
smartphones

4. Mobile Technology Trends 2013 and 2014
4
• 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 ingredients
5
What is responsive web design?
— Flexible, grid-based layout
— Flexible images and media
— Media queries - a module from the CSS3
specification

6. Flexible, grid-based layout
6

7. Flexible, grid-based layout
7
— 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 media
8
— 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 media
9
— .blog { background: #F8F5F2
url("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 queries
10
— CSS2 - media types : all, braille, embossed, handheld, print,
projection, screen, speech, tty, and tv
E.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 queries
11
— CSS3 – Media queries
— @media screen and (min-width: 1024px)
<link rel="stylesheet" href="wide.css" media="screen
and (min-width: 1024px)" />
OR
@import url("wide.css") screen and (min-width:
1024px);

12. Media queries
12
— 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 queries
13

14. 14

15. 15

16. Progressive enhancement approach
16
— Writing meaningful markup
— Applying Styles effectively
— Scripting enhancements and interactivity

17. 17
Queries ???

18. 18
Thank You

19. A D D I T I O N A L I N F O R M A T I O N
Appendix

20. Mobile AD Tool Proliferation
One Tool is Seldom Enough
20
GoogleNative SDKs
HTML5 Frameworks
All in 1 solutions
Low-cost disruptors
Megavendors
Apple Microsoft
Sencha JQM
AppceleratorXamarin
Antenna Kony
Lightweight tools
Oracle SAP
Catavolt Webalo
IBM
• HTML, Hybrid or
native?
• Vendor viability?
• Cost / licensing?
• Strategic or tactical
app?
• Support?
• Ecosystem strength?
• Cloud services?
• Vertical capability?
• Skills & sourcing?
• IDE & tooling?
• Integration?
• .......