Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cross Device UI Designing
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
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%
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