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


★ Front-End Developer & UX Designer @ JomSocial

Harry Saputra



★ Chief Creative Officer @ Tandif

Harry Saputra



★ Chief Creative Officer @ Tandif

★ [email protected], [email protected]

mailto:[email protected]




Let’s Start!


Screens and devices


Various Screen


Various SmartphoneAdobe Camp 2012 Indonesia - Al Azhar University, Jakarta

They are ubiquitous..



Everywhere


Everyone


Everytime

Lifestyle has changed now


phonecount.com


phonecount.com


★ There are 7 Billion People in the world now

phonecount.com



★ 6 Billion connected phones in the world

phonecount.com




★ 1.7 Billion phone with internet connection

phonecount.com




★ 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


http://www.idc.com/getdoc.jsp?containerId=prUS23028711



how can we deliver a great experience to these billion of people?


Create mobile apps?


Create mobile apps?


★ Yeah Iphone Apps!

Create mobile apps?



★ Oh, Android too!

Create mobile apps?




★ Eh, Wait, Windows phone also!

Create mobile apps?




★ Eh, Wait, Windows phone also!

★ err ... don’t forget blackberry phone

Make a mobile version of website




★ Good for web application.




★ too serious for blog, company profile, portfolio





★ It’s still have two version.





★ 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!


It was started by Ethan Marcotte on alistapart..


alistapart.com/articles/responsive-web-design/

Ah .. i don’t need responsive web design..



Responsive Web Design


“A flexible grid (with flexible images)that incorporates media queries tocreate a responsive, adaptive layout.” - Ethan Marcotte

The Recipe


The Recipe


★ A flexible, grid-based Layout

The Recipe



★ Flexible images and media

The Recipe



★ Flexible images and media

★ Media queries - a module from CSS3

Flexible grid


★ Sizing in proportion

★ % rather than px, creates the fluid layout

★ flexible image { max-width : 100% }

CSS3 Media Queries


CSS3 Media Queries


★ Conditional Styling

★ Allow you to target specific device size , screen size, screen orientation, and much more

Demo ...



The Algorithm ...


The Algorithm ...


Skip it for today :)


We have Adobe Dreamweaver!


let’s see ..


let’s try ..


nice .. so,What’s Next ?


Get the designon real devices!


The common step


★ 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


★ 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 Shadow


Adobe Shadow


it can be easier, and we can debug it remotely on each devices!

Let’s see !


Bad Point of RWD


★ No mobile only, users will download all the page

★ force the user to stop zooming and pinch on screen ..

Resources


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/

http://www.alistapart.com/articles/responsive-web-design/

http://www.alistapart.com/articles/responsive-web-design/

http://unstoppablerobotninja.com/entry/fluid-images

http://unstoppablerobotninja.com/entry/fluid-images

http://code.google.com/p/css3-mediaqueries-js/

http://code.google.com/p/css3-mediaqueries-js/

http://www.cameronmoll.com/archives/000892.html

http://www.cameronmoll.com/archives/000892.html

http://www.alistapart.com/articles/fluidgrids/

http://www.alistapart.com/articles/fluidgrids/

http://www.w3.org/TR/css3-mediaqueries/

http://www.w3.org/TR/css3-mediaqueries/

Adobe’s Resources


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 :)


Designing Web For Various Devices

Technology

harry saputra

yeah iphone

al azhar university

end developer

create mobile

mobile version

ethan marcotte

windows phone