yarenty coding: Websites - Mobile Development

Thursday, October 9, 2014

Websites - Mobile Development

Few tools and tricks for mobile website development - very RAW info.

Simulators

Android AVD Manager
Blackberry Ripple Emulator
Opera Mobile
Windows Phone Emulator

IDE

Aptana

Validation tools

http://validator.w3.org

W3C HTML5 validator
W3C CSS Validation Service

Debugging tools

Most browsers (F12 ;-) ) + Chrome, Firefox and OperaMobile support remote debugging
To stay sane: get your site working with a desktop browser and emulator then test on real devices.

Responsive Web Design

Fluid layout width - layouts that resize to fit in the available screen space
Media queries - load different CSS depend on screen size
flexible images and media - to suit screen size and bandwidth
typesetting: use em or % instead px

Box Problem

.borderBox *
{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

RWD Formula

result = target/context
25px (target) / 16px (context) = 150% (result) => 1.5 em

CSS reset

Reset style sheets between different browsers (for consistency):

Eric Meyer's Reset
HTML5 Doctor CSS Reset
Yahoo! Reset CSS
Normalize.css

http://cssreset.com

Media queries

@media screen and (max-width: 479px) {
# header-logo {
width:75%
margin: 0 auto 0 } }
@media screen and (max-width: 737px) {
# header-logo {
width:100%
margin: 0 0 0 0 } }

Support good across browsers, except IE ( from IE9+) - use respond.js to emulate:

https://github.com/scottjehl/Respond

Screen widths

ICON

http://realfavicongenerator.net/

Responsive Navigation Menus

http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/

Images

Prevent media from overflowing it's container:

img,embed,object, video {
max.width: 100%
}

for IE:

img.rwd { width:100%; height:auto; }

Image Adaption

Server-Side

WURFL
Adaptive images ( http://adaptive-images.com)

Client-Side

HiSRC jQuery plugin https://github.com/teleject/hisrc
Picturefill https://github.com/scottjehl/picturefill

HTML5 <picture> element

Supported in older browsers by Picturefill script

<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 18em)" srcset="med.jpg, med-hd.jpg 2x">
<source srcset="small.jpg">
<img src="small.jpg" alt="some text">
<p>some text</p>
</picture>

JQuery Mobile - jQM

Gallery: http://www.jqmgallery.com

data-role:

page
header
content
footer

ThemeRoller: http://jquerymobile.com/themeroller

Modernizr

Open-source JavaScript feature-detection library http://modernizr.com

if (Modernizr.touch) { // code for toechscreen
} else { // no touchscreen
}

Modernizr.localStorage (sessionStorage)

Modernizr.geolocation

data.setCurrentLocation = function () {
   if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(data.geoSuccess, data.geoError);
} else {
data.geoError('not supported');
}
};

data.geoSuccess = function (position) {
var s = document.querySelector('#status');

if (s.className == 'success') { //Firefox fix
   return;
}

   s.className = 'success';

   data.currentLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

var myOptions = {
zoom: 15,
center: data.currentLatLng,
mapTypeControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};

data.currentLocationMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var currentPositionMarker = new google.maps.Marker({
map: data.currentLocationMap,
position: data.currentLatLng
});
};

yarenty coding