Few tools and tricks for mobile website development - very RAW info.
Simulators
- Android AVD Manager
- Blackberry Ripple Emulator
- Opera Mobile
- Windows Phone Emulator
IDE
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
