Designing Web For Various Devices
-
Upload
harry-saputra -
Category
Technology
-
view
627 -
download
1
description
Transcript of Designing Web For Various Devices
Designing Web for various devices
ADOBE CAMP INDONESIA 2012
Harry Saputra
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Harry Saputra
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ Front-End Developer & UX Designer @ JomSocial
Harry Saputra
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ Front-End Developer & UX Designer @ JomSocial
★ Chief Creative Officer @ Tandif
Harry Saputra
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ Front-End Developer & UX Designer @ JomSocial
★ Chief Creative Officer @ Tandif
Let’s Start!
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Screens and devices
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Various Screen
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Various SmartphoneAdobe Camp 2012 Indonesia - Al Azhar University, Jakarta
They are ubiquitous..
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Everywhere
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Everyone
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Everytime
Lifestyle has changed now
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
phonecount.com
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
phonecount.com
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ There are 7 Billion People in the world now
phonecount.com
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ There are 7 Billion People in the world now
★ 6 Billion connected phones in the world
phonecount.com
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ There are 7 Billion People in the world now
★ 6 Billion connected phones in the world
★ 1.7 Billion phone with internet connection
phonecount.com
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ There are 7 Billion People in the world now
★ 6 Billion connected phones in the world
★ 1.7 Billion phone with internet connection
★ 2.1 Billion internet users on PC and phones
The total number of people using the web on mobile devices is set to surpass desktops by 2015
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
http://www.idc.com/getdoc.jsp?containerId=prUS23028711
how can we deliver a great experience to these billion of people?
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Create mobile apps?
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Create mobile apps?
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ Yeah Iphone Apps!
Create mobile apps?
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ Yeah Iphone Apps!
★ Oh, Android too!
Create mobile apps?
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ Yeah Iphone Apps!
★ Oh, Android too!
★ Eh, Wait, Windows phone also!
Create mobile apps?
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ Yeah Iphone Apps!
★ Oh, Android too!
★ Eh, Wait, Windows phone also!
★ err ... don’t forget blackberry phone
Make a mobile version of website
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Make a mobile version of website
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ Good for web application.
Make a mobile version of website
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ Good for web application.
★ too serious for blog, company profile, portfolio
Make a mobile version of website
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ Good for web application.
★ too serious for blog, company profile, portfolio
★ It’s still have two version.
Make a mobile version of website
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ Good for web application.
★ too serious for blog, company profile, portfolio
★ It’s still have two version.
★ more time ( and money ) to develop other version
So ?Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
ResponsiveWeb Design!
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
It was started by Ethan Marcotte on alistapart..
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
alistapart.com/articles/responsive-web-design/
Ah .. i don’t need responsive web design..
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Responsive Web Design
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
“A flexible grid (with flexible images)that incorporates media queries tocreate a responsive, adaptive layout.” - Ethan Marcotte
The Recipe
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
The Recipe
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ A flexible, grid-based Layout
The Recipe
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ A flexible, grid-based Layout
★ Flexible images and media
The Recipe
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ A flexible, grid-based Layout
★ Flexible images and media
★ Media queries - a module from CSS3
Flexible grid
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ Sizing in proportion
★ % rather than px, creates the fluid layout
★ flexible image { max-width : 100% }
CSS3 Media Queries
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
CSS3 Media Queries
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ Conditional Styling
★ Allow you to target specific device size , screen size, screen orientation, and much more
Demo ...
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
The Algorithm ...
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
The Algorithm ...
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Skip it for today :)
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
We have Adobe Dreamweaver!
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
let’s see ..
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
let’s try ..
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
nice .. so,What’s Next ?
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Get the designon real devices!
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
The common step
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ Enter the URL on each devices
★ Click or refresh one by one on devices to move on other page / getting the latest result after changing the design
The Problem
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ It’s not nice if we have 5 devices to be tested.
★ No DOM inspector / inspect element / firebug on smartphone/tablet browser for debugging the design
i c .. any solution ?
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Adobe Shadow
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Adobe Shadow
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
it can be easier, and we can debug it remotely on each devices!
Let’s see !
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
Bad Point of RWD
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
★ No mobile only, users will download all the page
★ force the user to stop zooming and pinch on screen ..
Resources
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
The article that started it all, by Ethan Marcotte:http://www.alistapart.com/articles/responsive-web-design/
Fluid Images by Ethan Marcotte:http://unstoppablerobotninja.com/entry/fluid-images
IE8 and below Media Queries fix:http://code.google.com/p/css3-mediaqueries-js/
IE6 min/max-width hack:http://www.cameronmoll.com/archives/000892.html
Fluid Grids by Ethan Marcotte:http://www.alistapart.com/articles/fluidgrids/
Media Queries reference, list of Media Query selectors available:http://www.w3.org/TR/css3-mediaqueries/
Adobe’s Resources
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
http://tv.adobe.com/watch/adc-presents/introducing-adobe-shadow/
Thank you for attention :)
Adobe Camp 2012 Indonesia - Al Azhar University, Jakarta