Mobile Web Development“I want to be buried with a mobile phone, just in case I'm not dead.”

- Amanda Holden

What is a Mobile Browser? A mobile browser is a web browser designed for use on

a mobile device such as a mobile phone or PDA.

Mobile browsers are optimized so as to display Web content most effectively for small screens on portable devices.

Websites designed for access from these browsers are referred to as wireless portals or collectively as the Mobile Web. They may automatically create "mobile" versions of each page.

HistoryThe first mobile browser for a PDA was PocketWeb for the Apple Newton created at TecO in 1994, followed by the first commercial product NetHopper released in August 1996.

And back to present times…

The Opera Mini 6 running on the iPhone

Underlying Technology The mobile browser usually connects via cellular

network, or increasingly via Wireless LAN, using standard HTTP over TCP/IP and displays web pages written in HTML, XHTML Mobile Profile (WAP 2.0), or WML (which evolved from HDML).

WML and HDML are stripped-down formats suitable for

transmission across limited bandwidth, and wireless data connection called WAP.

The Paradigm Shift A 2010 ITU (International Telecommunication Union)

report said that with the current growth rates, web access by people on the go — via laptops and smart mobile devices – is likely to exceed web access from desktop computers within the next five years.

In January 2014 the time of mobile access to the internet exceeded desktop use in the USA. The shift has been accelerating with the rise of larger multi-touch smartphones, and of multi-touch tablet computers.

Here are some facts!

Surveys that have been carried out in the recent past help us get to know about the trends in smartphone usage.

And some more…

Designing for Mobile Devices Mobile devices’ screens are usually smaller, but they also usually automatically switch the screen orientation between portrait and landscape mode as the user rotates the device. They usually have touch screens for user input.

Responsive Web Design is a term for a set of techniques that enables your web site to adapt its layout as its viewing environment such as:-

1) Fluid CSS layouts, to make the page adapt smoothly as the browser window size changes.2) the use of media queries to conditionally include CSS rules appropriate for the device

screen width and height.

Cross-Browser DevelopmentTo create web sites that will work acceptably across different mobile browsers:1) Try to avoid using browser-specific features, such as vendor-prefixed CSS

properties.2) If you do need to use these features, check whether other browsers

implement their own versions of these features, and target them too.3) For browsers that don't support these features, provide an acceptable

fallback.

Things that need to be tested1) Screen size - Designing responsively means being agnostic to device

type. So, get a good idea of how your website works on a wide range of screen sizes.

2) Connection speed - Treat connection speed the same way. Unfortunately, there is no correlation between screen size and connection speed.

3) Pixel density - Pixel density refers to the number of pixels that make up a screen. The higher the pixel density, the clearer the picture on the screen will be. Differences in pixel density can cause issues that are subtle and hard to debug.

Things that need to be tested4) Interaction style - Make sure to cover not only mouse-and-keyboard interaction and

touch interaction, but also D-pad styles of interaction, which happens with the arrow keys on a phone keyboard.

5) Similarity to other browsers - If browser A is very similar to browser B, and browser A passes your test, then browser B has a lower chance of causing serious problems than other browsers.

6) Browser rendering mode - Browsers have two ways of rendering a page:i. the standard client-side rendering that we are all used to,ii. proxy rendering.

Predictions for the FutureLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua.

And we’re done!Any Questions??

(Tread with caution, I ain’t an expert on this!)

THANKS!