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:

Screen widths

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0" />
+ css:
@viewport {
  width: device-width;
  zoom: 1.0;
  user-zoom: zoom;
}

ICON


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:
 <!-- [if IE<=8]>
 <link rel="stylesheet" href="ie-style.css"/>
<![endif]-->

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

Image Adaption

Server-Side



Client-Side



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

data-role:
  • page
  • header
  • content
  • footer

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
               });
            };

Links