Mobile Web Development Notes from Google Udacity

1.Chrome Developer Tools:

DOM Inspector

CSS/JavaScript Live update

Network: HTTP requests and responses

Profiles: Record JavaScript object allocations to detect memory leaks

Mobile devices emulator

 2.Mobile UI and Viewport

Mobile First Design

Fixed width problem set viewport: width=device-width

Mobile app specific meta data

font-size: vw/vh

3.Fluid Design

Flexbox

Bootstrap CSS

Responsive Design:adapting to different devices use media queries

 4. Media Queries

@media  CSS3

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

example:

@media only screen and (min-device-width:768px) and (max-device-width:1024px)

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape)

 5.Responsive Images

Image rendering in different screens: as beautiful as it is using minimal  bandwidth

Use SVG

Use Icon Font

Use Canvas

CSS gradient, borders, etc

Cheat: Use high quality but highly compressed image

 Server side to sniff client side to send correct definition image

Client side to request correct definition image

Use device-pixel-ratio

 CSS3

background-image: image-set();

http://css-tricks.com/which-responsive-images-solution-should-you-use/

 Helper tool Picturefill: https://github.com/scottjehl/picturefill

 7.Optimizing Web Performance

See Yahoo YSLOW.

 8.Touch event

Both mobile and desktop

Don’t :hover

Don’t disable mouse support

Do use large hit target

Don’t detect ontouchstart

Fix click delay, i.e. quick twice click for zoom: -user-scalable=no, but can’t scale view

Support touch directly

Two touches spontaneously: add id

IE: Pointer Events

http://msdn.microsoft.com/en-us/library/ie/dn433244%28v=vs.85%29.aspx

9.Input

HTML5:

color, date, datetime, datetime-local,email,month,number,range,search,tel,time,url,week

This will trigger different keyboard in mobile device.

pattern = “regex” for simple client side validation, all input in form must validate in server side.

10.Device Access

navigator.getUserMedia

Sensors in mobile

Camera

Audio

GPS/Geolocation

Compass

Orientation

Motion

 11.Offline and Storage

navigator.online detection is not stable

Client cache

Server cache

AppCache vs HTTP cache

Cache manifest

sessionStorage

localStorage

IndexedDB

http://www.html5rocks.com/en/tutorials/appcache/beginner/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s