Developer Data Modeling Mistakes: From Postgres to NoSQL
Responsive Vs Dedicated: Insight into Mobile Web
1.
2. What is mobile web
Specifically designed for Handheld devices
Requires less processing power and less bandwidth
Targeted for variety of device screens and applies usability of mobile phone
users
3.
4.
5.
6.
7.
8.
9. Responsive web (Cont..)
Separate Style sheets for separate screens
<link rel="stylesheet" type="text/css" href="style.css"
media="screen, handheld" />
<link rel="stylesheet" type="text/css"
href="enhanced.css" media="screen and (min-width:
620px)" />
10. Responsive web (Cont..)
Adaptive Images
Less JavaScript
Never use pixel values when defining the layout use auto or percentages
Always try to use div instead of tables
11. Some Good Responsive Sites
http://www.touchtech.co.nz/
http://morehazards.com/
http://earthhour.fr/
12. Dedicated Web
Separate website for mobile
Focus more on mobile features
Can build from scratch or using a framework
JQuery Mobile, Sencha Touch, Zepto JS, etc..
20. HTML5 Features which is useful
Input types
Email (iOS)
URL (iOS)
Tel (iOS/Andorid)
Date (iOS)
(tested on Android 2.3 and iOS 5.0)
21.
22.
23. Detect Using Screen Resolution
if ((screen.width < 480) || (screen.height <
480))
{
location.replace('/mobile/');
}
24. Final Tweeks
Reduce Number of HTTP requests
* Remove iFrames: ex: facebook, twitter
CSS/JS compression
Use much less JS
Use of CSS image sprites and Data URIs
Move all the custom JS files to the bottom of the page if possible
25.
26. Final Tweaks (cont..)
Use relative units like ems and percentages to keep styles as fluid and flexible
as possible
Use HTML characters (ex: ★ to solid star ★ and ☆ to empty stars
☆ ), CSS gradients, etc.
Use URI Schemes (ex: <a href="tel:+18005550199">94-713-505-298-</a> )