Making your site mobile-friendly / RIT++

Presentation on integration of W3C and WebKit test

This document provides an overview of HTML5 and XHTML2. It discusses the history of each standard, including periods where work took place outside the W3C. Key differences are that HTML5 focuses on evolving the existing web incrementally to support applications, while XHTML2 aimed to switch to a more declarative XML-based approach. HTML5 is natively supported in browsers, while XHTML2 likely remains most useful for server-side authoring.

Talk including tips and tricks on how to bring up a performance culture showing of various tools to monitor performance related metrics.

This document compares native applications, web applications, and widgets for mobile devices. Native applications have direct access to device features but must be developed for each platform. Web applications can be written once and deployed anywhere but run inside the browser without direct device access. Widgets combine the cross-platform capabilities of web applications with the ability to access device features and run standalone like native applications.

This document provides an overview of various HTML5 APIs for multimedia, including native <video> and <audio> elements, the <canvas> element for scriptable graphics, and geolocation APIs. It discusses key considerations around supporting different media formats in <video> and <audio> and controlling media playback via JavaScript. The document also briefly introduces other HTML5 APIs for offline applications, local storage, and databases. It emphasizes the importance of feature detection over browser sniffing for progressive enhancement.

This document appears to be a presentation about web standards given by Zibin Cheah on December 8, 2009. The presentation discusses the history and development of web standards including HTML, CSS, and SVG. It provides examples of how Opera browser supports these standards and highlights some of its features like Opera Unite and Turbo which allow file sharing and faster page loading. The presentation concludes by thanking the audience and providing contact information for further details.

These are the slides from the talk that Brian Ford and I did at Philly ETE 2013.

Patrick Lauke gives an overview of new web technologies available in HTML5, including canvas, video, geolocation, offline support, storage and more. He discusses the history and development of HTML5, how it standardizes current browser behavior, and new powerful form and semantic elements. Patrick provides demonstrations of canvas, video, geolocation and other features, noting their importance for building applications without plugins. He encourages developers to start using these technologies today.

My presentation about the HTML5 canvas element at the Standards.Next Meetup in London, 27 June 2009. Current and future implementations of canvas in games, applications, and video.

Bruce Lawson of Opera toured Indonesian Universities discussing web standards, HTML5, CSS Media Queries and cross-device development.

1. Open web standards democratize the web by making it accessible to people with disabilities or without the latest hardware, and reduce reliance on any single vendor. 2. Adaptive content and responsive design allow a single website to work well on any device through techniques like CSS media queries. 3. The browser is emerging as a platform for applications through standards like HTML5, widgets, and JavaScript APIs that programmatically access device capabilities like contacts and cameras.

The document discusses the origins and development of HTML5. It describes how in 2004, the W3C was focused on XHTML 2.0 but browser developers grew concerned about single-vendor solutions filling gaps without standards. Opera submitted a paper to the W3C proposing a unified web applications standard with principles like backwards compatibility and avoiding device-specific profiling. This led to the WHATWG forming in 2004 to develop new web standards, producing HTML5. The document outlines key HTML5 design principles and new features like SVG, CSS, geolocation and forms.

Open web standards are beneficial because they make the full web accessible to more people and devices, reduce reliance on single vendors, and can increase profits. Some key benefits of open standards include being royalty-free and not tied to specific vendors. HTML5 introduces new form elements, canvas, video, and audio elements to standardize functionality without plugins. With tools like CSS media queries and W3C widgets, content can be adapted for different devices by using the browser as a platform instead of each device's native operating system, bringing the web to more users.

W3C Widgets are applications developed with web standards that can run across different mobile platforms using the browser engine. A widget consists of an index.html file, assets, and a config.xml file packaged into a .wgt file. Widgets take advantage of HTML5 features like the Application Cache, WebSQL storage, and local storage. They can run on browser runtimes including Opera Mobile, Widgeon, Windows Mobile 6.5, Nokia Qt Web Runtime, and Apache Wookie. The W3C is working to define JavaScript APIs for contacts, calendar, media capture, and messaging to provide more capabilities to widgets.

Forget the empty "Web 2.0" buzzword! Web development, however, is changing. In this session, Bruce gives and overview of HTML5, its intelligent forms, scriptable images and native video. Together with CSS3 and SVG, it will change the way you work making it easier to develop exciting applications. The emergence of more and more Web-enabled devices presents headaches: do you write and test many sites for different devices, or make one site for all? Some simple techniques help you write one site to work everywhere, saving you time and grey hairs. Web development 2.0: Web workers of the world, relax!

The document discusses the development of HTML5 multimedia capabilities. It describes an experimental <video> element being implemented by Opera that provides a simple JavaScript API for controlling video playback. Issues around choosing a baseline video format that is universally supported are also discussed, along with considerations for audio formats and giving users options to play video across different browsers. The maturity of various HTML5 multimedia features is assessed.

Extended version of my "Making your site mobile-friendly" talk, including a short look at native applications vs web apps, for the UKOLN DevCSI event "Developing for Mobile Applications in Education" in Reading http://www.ukoln.ac.uk/events/devcsi/mobile_applications/

Internetnutzung auf Handys und mobilen Geräten ist in den letzten Jahren drastisch gestiegen. Und mit diesem Trend steigen auch die Erwartungen der Kunden – eine "mobile-optimised"-Version gehört bei vielen Webprojekten schon jetzt zum Standard – und der Endnutzer. Obwohl die Browser im mobilen Bereich schon recht gut mit "normalen" Webangeboten klar kommen, gibt es trotzdem neue Strategien und altbekannte Webdesign-/Web-Development-Methoden, um sicherzustellen, dass ihre Seiten auf allen Geräten – jenseits vom klassischen Desktoprechner – so gut wie möglich aussehen und funktionieren.

This document discusses approaches to mobile-friendly web development beyond just desktop websites. It outlines three main approaches: 1) Doing nothing and hoping normal websites work okay on mobile, 2) Creating a separate mobile-optimized site, or 3) Having a single adaptive site that uses techniques like fluid layouts, responsive design, and CSS media queries to dynamically adapt to different screen sizes and devices. The document then goes into details about techniques for adaptive sites, including viewport meta tags, touch and gesture support, and using device capabilities like geolocation without plugins. It emphasizes that adaptive design is useful not just for mobile but any device.

This document discusses approaches to mobile-friendly web development beyond just desktop websites. It outlines three main approaches: 1) Doing nothing and relying on modern mobile browsers to render normal sites, 2) Creating a separate mobile site with a subdomain or folder, and 3) Having a single adaptive site that uses fluid layouts, responsive design, and CSS media queries to dynamically adapt to different screen sizes and devices. The document then covers various techniques for adaptive design, including viewport meta tags, touch and gesture support, multimedia without plugins, geolocation, and offline capabilities.

The document discusses making websites mobile-friendly by either creating a separate mobile site with a different domain (like m.example.com) or using a single adaptive site with fluid layouts, viewport meta tags, and CSS media queries to dynamically adjust the layout for different screen sizes. It recommends minimizing requests through techniques like CSS sprites and combining files to optimize performance on mobile networks.

This document discusses making websites mobile-friendly. It recommends building a single, adaptive site that uses fluid layouts, progressive enhancement, and graceful degradation. Key techniques include using CSS media queries and viewport meta tags to customize styling for different screen sizes, minimizing data and requests through techniques like CSS sprites and data URLs, and supporting the most common mobile browsers.

A general overview of HTML5, CSS 3, CSS Meedia Queries, mobile, DAP. You might find the organically-grown hand-selected list-of-links-o-rama™ at http://my.opera.com/ODIN/blog/over-the-air-2010-bruce-lawsons-web-developments-2-0-talk to be useful.

This document discusses approaches to web development for mobile devices. It begins by noting the increasing importance of the mobile web. It then examines three approaches: 1) Doing nothing and hoping modern mobile browsers can handle desktop sites, 2) Creating a separate mobile site, and 3) Having a single adaptive site that refactors content for different screens using fluid layouts, progressive enhancement and media queries. The document dives into techniques for adaptive design like viewport meta tags, touch events, and responsive images. It also notes remaining challenges like viewport interpretation and high-DPI screens lying about resolution.

This document discusses making websites responsive for different devices. It covers using CSS media queries to apply different styling based on screen width, height, and other device features. It also covers using viewport meta tags to control zooming and scaling on mobile browsers. The goal is to build sites that can adapt their layouts across various devices like phones, tablets, and desktops.

This document discusses methodologies and techniques for optimizing websites for mobile devices, including using responsive design with CSS media queries. It presents three main approaches: building a separate mobile site, making no changes, or optimizing the main site for mobile. The bulk of the document then focuses on how to use CSS media queries to optimize websites, covering features like width, height, and orientation. It also discusses related techniques like viewport meta tags and approaches being considered for future standards.

The document provides tips for optimizing websites for mobile browsers. It discusses differences between mobile and desktop browsers like slower rendering speeds and varied browser families on mobile. It recommends strategies like embedding resources inline, caching assets locally, lazy-loading content, minimizing requests and file sizes, detecting devices, and testing on mobile emulators. The document emphasizes optimizing for the limitations of low-end mobile browsers.

This document provides tips and techniques for making a website mobile-friendly. It discusses three approaches: doing nothing and hoping the mobile browser can handle it, creating a separate mobile site, or using a single adaptive site. The recommended approach is a single adaptive site that uses fluid layouts, progressive enhancement, and CSS media queries to provide an optimized experience across devices. Specific techniques include using the viewport meta tag, minimizing data and requests, CSS sprites, and data URLs.

Internet Explorer Mobile 6 is a web browser for Windows Mobile devices that aims to provide a desktop-like browsing experience. It supports standards like HTML, CSS, DOM and ECMAScript. New features include improved AJAX support using JavaScript 5.7, optional Adobe Flash Lite 3.1, and touch and gesture navigation on Windows Mobile Professional devices. It also offers features for mobile optimization and integration with phone and mail functions.

The document discusses the history and evolution of web browsers and standards. It notes that early browsers in the 1990s included Mosaic and Netscape Navigator. In the late 1990s, Internet Explorer and Netscape competed using both open and closed standards. HTML5 was developed in the 2000s to better support web applications and add new elements like video. The document also discusses approaches to making websites mobile-friendly, including responsive design using viewport meta tags and media queries.

The document discusses HTML5, including what it is, its features, adoption, and changes from previous versions of HTML. It provides information on new HTML5 elements like <header>, <footer>, <nav>, <section>, and <article>. It also covers new form input types, multimedia support through <video> and <audio> elements, canvas graphics, geolocation, web sockets, and more. The document contains examples and explanations of how to implement and use various HTML5 features.

This document discusses various topics related to developing web apps, including HTML5, responsive design, touch events, offline capabilities, and debugging tools. It provides links to resources on HTML5 features like media queries, SVG, web workers, and the page visibility API. It also covers techniques for adapting content like responsive web design, progressive enhancement, and server-side adaptation. Mobile browser stats and popular devices on Douban are mentioned. Frameworks like Bootstrap and tools like Weinre for debugging mobile apps are referenced.