Your SlideShare is downloading. ×
0
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Responsive Vs Dedicated: Insight into Mobile Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Vs Dedicated: Insight into Mobile Web

370

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
370
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. What is mobile webSpecifically designed for Handheld devicesRequires less processing power and less bandwidthTargeted for variety of device screens and applies usability of mobile phoneusers
  • 2. 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)" />
  • 3. Responsive web (Cont..)Adaptive ImagesLess JavaScriptNever use pixel values when defining the layout use auto or percentagesAlways try to use div instead of tables
  • 4. Some Good Responsive Siteshttp://www.touchtech.co.nz/http://morehazards.com/http://earthhour.fr/
  • 5. Dedicated WebSeparate website for mobileFocus more on mobile featuresCan build from scratch or using a frameworkJQuery Mobile, Sencha Touch, Zepto JS, etc..
  • 6. Initial Mandatory StepsMeta Tags<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1 user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes">
  • 7. Include JQM files<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  • 8. Whats Next?Usage of HTML5 Custom tags data-role=“ ” rel =“external” data-ajax=“false” data-transition=“” data-rel=“”
  • 9. HTML5 Features which is usefulInput typesEmail (iOS)URL (iOS)Tel (iOS/Andorid)Date (iOS)(tested on Android 2.3 and iOS 5.0)
  • 10. Detect Using Screen Resolution if ((screen.width < 480) || (screen.height <480)) { location.replace(/mobile/); }
  • 11. Final TweeksReduce Number of HTTP requests * Remove iFrames: ex: facebook, twitterCSS/JS compressionUse much less JSUse of CSS image sprites and Data URIsMove all the custom JS files to the bottom of the page if possible
  • 12. Final Tweaks (cont..)Use relative units like ems and percentages to keep styles as fluid and flexibleas possibleUse HTML characters (ex: &#9733 to solid star ★ and &#9734 to empty stars☆ ), CSS gradients, etc.Use URI Schemes (ex: <a href="tel:+18005550199">94-713-505-298-</a> )
  • 13. Further Readingshttp://www.html5rocks.com/en/mobile/http://www.w3.org/Mobile/https://developers.google.com/speed/articles/mobilehttp://css-tricks.com
  • 14. Any Questions?:D Just Kiddin!

×