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

★ harry@tandif.com, me@harrysaputra.com

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

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

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

★ 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

★ 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

★ Conditional Styling

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

Demo ...

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

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/

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

Transcript of Designing Web For Various Devices

EE16B Designing Information Devices and Systems II

POWER UNITS RELAY DEvICES vARIOUS DEvICES

Designing and Developing Trello for Multiple Devices

Designing Learning for Mobile Devices @ Training2013

DESIGNING MOBILE APPLICATIONS FOR MULTIPLE FORM … · 2019. 8. 23. · Designing for multiple devices - Designing for ‘Fragmentation’ Mobile devices come in a range of form factors.

Various affordable website designing options

Designing UI/UX for Mobile-Connected Devices

Various work holding devices

Designing Elegant UX Across Devices and Platforms

Designing Energy Efficient SATA Devices€¦ · Designing Energy Efficient SATA Devices Overview and Implementation Recommendations 2011 – 2013 Platforms April 2011 Revision 1.63

Designing the surface of medical devices

Designing for Multiple Devices - Sarit Arora

Designing for mobile devices

Piezoluminescent devices by designing array structures

Casablanca: Designing Social Communication Devices for the Home

Designing Display Ecologies for Visual Analysisrelated information over displays in order to facilitate synthesizing information scattered over separate displays and devices. The various

Designing Medical Devices for Emerging Markets

Designing Reliabilty Into Bio Medical Devices-Medi2005

DESIGNING STORMWATER TREATMENT DEVICES ... - Water New …

Luke Wroblewski, Designing Across Devices, WarmGun 2013