1 / 23

Archiving the Mobile Web: Standards, Techniques, and Challenges in Web Design

This paper discusses the evolution of mobile web standards, focusing on the differences between mobile and stationary web design. It highlights important markup languages like WML and HTML5, as well as responsive web design techniques that ensure seamless user experiences across devices. The authors also explore methods of serving mobile sites, including client-side and server-side redirection, and the significance of CSS media queries. Finally, the paper examines challenges in archiving mobile sites and the need for specialized crawling techniques to capture dynamic content.

gyan
Download Presentation

Archiving the Mobile Web: Standards, Techniques, and Challenges in Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Archiving the Mobile Web Frank McCown, Monica Yarbrough, & Keith Enlow Computer Science Dept Harding University WADL 2013Indianapolis, INJuly 25, 2013

  2. Mobile vs. Stationary Web

  3. Mobile Web-Related Markup Languages Smartphone era http://en.wikipedia.org/wiki/File:Mobile_Web_Standards_Evolution_Vector.svg

  4. Two Types of Mobile Web Smartphone Web Feature Phone Web cHTML (iMode), WML, WAP, etc. XHTML, HTML5, etc.

  5. Serving Up Mobile Sites • Responsive web design • Same HTML content to desktop and mobile • CSS media queries alter appearance <!-- CSS media query on a link element --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- CSS media query within a style sheet --> <style> @media (max-width: 600px) { .sidebar { display: none; } } </style>

  6. Example of Responsive Web Design

  7. Serving Up Mobile Sites • Responsive web design • Same HTML content to desktop and mobile • CSS media queries alter appearance • Redirect mobile user agent to mobile site • Client-side redirection • Server-side redirection

  8. Client-Side Redirection • JavaScript detects mobile user agent // From www.harding.edu varua = navigator.userAgent.toLowerCase(); if (queryString.match('version=mobile') || ua.match(/IEMobile|WindowsCE|NetFront|PlayStation|likeMac OS Z|MIDP|UP\.Browser|Symbian| Nintendo|BlackBerry|mobile/i)) { if (!ua.match('ipad')) { if (window.location.pathname.match('.html')) window.location= window.location.pathname.replace('.html', '.m.html'); else window.location= window.location.pathname + 'index.m.html'; } }

  9. Client-Side Redirection

  10. Server-Side Redirection • Server routes mobile user agent to different page Apache Example: RewriteEngineOn RewriteBase / RewriteCond %{HTTP_USER_AGENT} (android|bb\d+|meego).+mobile|avantgo|badda\/|blackberry|blazer|etc…|zte\-) [NC] RewriteRule ^$ http://detectmobilebrowser.com/mobile [R,L] https://developers.google.com/webmasters/smartphone-sites/details

  11. Server-Side Redirection

  12. Serving Up Mobile Sites • Responsive web design • Same HTML content to desktop and mobile • CSS media queries alter appearance • Redirect mobile user agent to mobile site • Client-side redirection • Server-side redirection • User-agent content negotiation • Dynamically serving different HTML for the same URL

  13. User-Agent Content Negotiation • Server serves up different content for same URL • Use Vary: User-Agent header in response • Best method for serving content quickly

  14. Archiving Mobile Sites • Responsive web design • Easy: Crawl like normal • Use client tools to view page formatted for mobile • Redirect mobile user agent to mobile site • Need to crawl with mobile user agent • Need JavaScript-enabled crawler to handle client-side redirection • User-agent content negotiation • Need to crawl with mobile user agent • Need to distinguish mobile vs. desktop for same URL

  15. How are we doing archiving mobile sites so far?

  16. Earliest archived page

  17. Earliest 2007 archived page: WML

  18. Finally some news!

  19. Really???

  20. Great…

  21. Only desktop version is archived!

More Related